@rpcbase/ui 0.158.0 → 0.160.0

package/dist/index18.js

@@ -1,8 +1,8 @@
 import { j as c } from "./index28.js";
-import { Check as de, ChevronDown as ie, ChevronUp as me } from "lucide-react";
+import { Check as ce, ChevronDown as ne, ChevronUp as ue } from "lucide-react";
 import * as n from "react";
-import { createPortal as pe } from "react-dom";
-import "./index29.js";
+import { DismissableLayerBranch as ae } from "./index29.js";
+import { createPortal as fe } from "react-dom";
 import "./index30.js";
 import "./index31.js";
 import "./index32.js";
@@ -10,624 +10,634 @@ import "./index33.js";
 import "./index34.js";
 import "./index35.js";
 import "./index36.js";
-import be from "./index37.js";
-import "./index38.js";
-import { Select as he, SelectTrigger as ve, SelectValue as ge, SelectContent as xe, SelectItem as we } from "./index20.js";
-import { useIsTouchDevice as ke } from "./index4.js";
+import "./index37.js";
+import de from "./index38.js";
+import "./index39.js";
+import { Select as me, SelectTrigger as pe, SelectValue as be, SelectContent as he, SelectItem as ve } from "./index20.js";
+import { useIsTouchDevice as ge } from "./index4.js";
 import { cn as O } from "./index2.js";
-function Q(f) {
-  return String(f).padStart(2, "0");
+function Q(a) {
+  return String(a).padStart(2, "0");
 }
-function ye(f) {
-  const u = f.trim();
+function xe(a) {
+  const u = a.trim();
   if (!u) return null;
-  const r = /^(\d{1,2}):(\d{2})$/.exec(u);
-  if (!r)
+  const t = /^(\d{1,2}):(\d{2})$/.exec(u);
+  if (!t)
     return null;
-  const i = Number(r[1]), s = Number(r[2]);
-  return !Number.isFinite(i) || !Number.isFinite(s) || i < 0 || i > 23 || s < 0 || s > 59 ? null : `${Q(i)}:${Q(s)}`;
+  const o = Number(t[1]), i = Number(t[2]);
+  return !Number.isFinite(o) || !Number.isFinite(i) || o < 0 || o > 23 || i < 0 || i > 59 ? null : `${Q(o)}:${Q(i)}`;
 }
-function J(f, u) {
-  const r = ye(f);
-  if (!r) return null;
-  const i = u.find((s) => s.value === r);
-  return U(i) ? { parsed: r, selectableValue: r } : { parsed: r, selectableValue: null };
+function J(a, u) {
+  const t = xe(a);
+  if (!t) return null;
+  const o = u.find((i) => i.value === t);
+  return W(o) ? { parsed: t, selectableValue: t } : { parsed: t, selectableValue: null };
 }
-function Z(f) {
-  const u = /^(\d{2}):(\d{2})$/.exec(f);
+function Z(a) {
+  const u = /^(\d{2}):(\d{2})$/.exec(a);
   if (!u)
     return null;
-  const r = Number(u[1]), i = Number(u[2]);
-  return !Number.isFinite(r) || !Number.isFinite(i) ? null : r * 60 + i;
+  const t = Number(u[1]), o = Number(u[2]);
+  return !Number.isFinite(t) || !Number.isFinite(o) ? null : t * 60 + o;
 }
-function U(f) {
-  return f ? !f.disabled : !1;
+function W(a) {
+  return a ? !a.disabled : !1;
 }
-function se(f, u) {
-  let r = null, i = Number.POSITIVE_INFINITY, s = Number.NEGATIVE_INFINITY;
-  for (const x of u) {
-    if (!U(x)) continue;
-    const d = Z(x.value);
+function te(a, u) {
+  let t = null, o = Number.POSITIVE_INFINITY, i = Number.NEGATIVE_INFINITY;
+  for (const I of u) {
+    if (!W(I)) continue;
+    const d = Z(I.value);
     if (d == null) continue;
-    const m = Math.abs(d - f);
-    (m < i || m === i && d > s) && (r = x, i = m, s = d);
+    const T = Math.abs(d - a);
+    (T < o || T === o && d > i) && (t = I, o = T, i = d);
   }
-  return r;
+  return t;
 }
-function oe({
-  direction: f,
+function re({
+  direction: a,
   viewportRef: u,
-  speed: r = 400,
-  className: i
+  speed: t = 400,
+  className: o
 }) {
-  const [s, x] = n.useState(!0), d = n.useRef(void 0), m = n.useRef(void 0), w = n.useRef(!1), P = n.useCallback(() => {
-    const h = u.current;
-    if (!h) {
-      x(!0);
+  const [i, I] = n.useState(!0), d = n.useRef(void 0), T = n.useRef(void 0), b = n.useRef(!1), g = n.useCallback(() => {
+    const x = u.current;
+    if (!x) {
+      I(!0);
       return;
     }
-    const { scrollTop: p, scrollHeight: M, clientHeight: T } = h, N = 2, g = p > N, E = p < M - T - N;
-    if (!(M > T + N)) {
-      x(!0);
+    const { scrollTop: h, scrollHeight: m, clientHeight: E } = x, k = 2, M = h > k, N = h < m - E - k;
+    if (!(m > E + k)) {
+      I(!0);
       return;
     }
-    x(f === "up" ? !g : !E);
-  }, [f, u]);
+    I(a === "up" ? !M : !N);
+  }, [a, u]);
   n.useEffect(() => {
-    const h = u.current;
-    if (!h) return;
-    P();
-    const p = () => P(), M = () => P();
-    h.addEventListener("scroll", p, { passive: !0 });
-    const T = new ResizeObserver(M);
-    T.observe(h);
-    const N = new MutationObserver(M);
-    return N.observe(h, { childList: !0, subtree: !0 }), () => {
-      h.removeEventListener("scroll", p), T.disconnect(), N.disconnect();
+    const x = u.current;
+    if (!x) return;
+    g();
+    const h = () => g(), m = () => g();
+    x.addEventListener("scroll", h, { passive: !0 });
+    const E = new ResizeObserver(m);
+    E.observe(x);
+    const k = new MutationObserver(m);
+    return k.observe(x, { childList: !0, subtree: !0 }), () => {
+      x.removeEventListener("scroll", h), E.disconnect(), k.disconnect();
     };
-  }, [u, P]);
-  const I = n.useCallback(() => {
-    d.current && (cancelAnimationFrame(d.current), d.current = void 0), w.current = !1, m.current = void 0;
-  }, []), A = n.useCallback(
-    (h) => {
-      const p = u.current;
-      if (!p || s || !w.current) {
-        I();
+  }, [u, g]);
+  const D = n.useCallback(() => {
+    d.current && (cancelAnimationFrame(d.current), d.current = void 0), b.current = !1, T.current = void 0;
+  }, []), P = n.useCallback(
+    (x) => {
+      const h = u.current;
+      if (!h || i || !b.current) {
+        D();
         return;
       }
-      m.current || (m.current = h);
-      const M = h - m.current, T = r * M / 1e3;
-      if (T < 0.1) {
-        d.current = requestAnimationFrame(A);
+      T.current || (T.current = x);
+      const m = x - T.current, E = t * m / 1e3;
+      if (E < 0.1) {
+        d.current = requestAnimationFrame(P);
         return;
       }
-      const N = p.scrollTop, g = p.scrollHeight - p.clientHeight;
-      let E;
-      f === "up" ? E = Math.max(0, N - T) : E = Math.min(g, N + T), p.scrollTop = E, m.current = h;
-      const R = 1;
-      (f === "up" ? E > R : E < g - R) && Math.abs(E - N) > 0.01 ? d.current = requestAnimationFrame(A) : (I(), setTimeout(P, 16));
+      const k = h.scrollTop, M = h.scrollHeight - h.clientHeight;
+      let N;
+      a === "up" ? N = Math.max(0, k - E) : N = Math.min(M, k + E), h.scrollTop = N, T.current = x;
+      const F = 1;
+      (a === "up" ? N > F : N < M - F) && Math.abs(N - k) > 0.01 ? d.current = requestAnimationFrame(P) : (D(), setTimeout(g, 16));
     },
-    [P, f, s, r, I, u]
-  ), H = n.useCallback(() => {
-    s || !u.current || w.current || (w.current = !0, m.current = void 0, d.current = requestAnimationFrame(A));
-  }, [s, A, u]);
-  return n.useEffect(() => I, [I]), /* @__PURE__ */ c.jsx(
+    [g, a, i, t, D, u]
+  ), A = n.useCallback(() => {
+    i || !u.current || b.current || (b.current = !0, T.current = void 0, d.current = requestAnimationFrame(P));
+  }, [i, P, u]);
+  return n.useEffect(() => D, [D]), /* @__PURE__ */ c.jsx(
     "div",
     {
       className: O(
         "flex items-center justify-center py-1 select-none",
-        s ? "cursor-default opacity-40" : "cursor-pointer opacity-100 hover:bg-accent/20",
-        i
+        i ? "cursor-default opacity-40" : "cursor-pointer opacity-100 hover:bg-accent/20",
+        o
       ),
       onPointerEnter: () => {
-        s || H();
+        i || A();
       },
       onPointerMove: () => {
-        !s && !w.current && H();
+        !i && !b.current && A();
       },
       onPointerLeave: () => {
-        I();
+        D();
       },
-      children: f === "up" ? /* @__PURE__ */ c.jsx(me, { "aria-hidden": !0, className: "h-4 w-4 opacity-50" }) : /* @__PURE__ */ c.jsx(ie, { "aria-hidden": !0, className: "h-4 w-4 opacity-50" })
+      children: a === "up" ? /* @__PURE__ */ c.jsx(ue, { "aria-hidden": !0, className: "h-4 w-4 opacity-50" }) : /* @__PURE__ */ c.jsx(ne, { "aria-hidden": !0, className: "h-4 w-4 opacity-50" })
     }
   );
 }
-function Ne({
-  id: f,
-  label: u = "Select time",
-  placeholder: r,
-  value: i,
-  onChange: s,
-  options: x,
-  autoComplete: d,
-  className: m,
-  labelClassName: w,
-  buttonClassName: P,
-  error: I,
-  disabled: A,
-  open: H,
-  onOpenChange: h,
-  autoScroll: p = "firstEnabledWithContext",
-  triggerTestId: M,
-  contentTestId: T,
-  isHydrated: N
+function oe({
+  id: a,
+  value: u,
+  onChange: t,
+  options: o,
+  placeholder: i = "Select time",
+  autoComplete: I,
+  className: d,
+  inputClassName: T,
+  disabled: b,
+  readOnly: g,
+  open: D,
+  onOpenChange: P,
+  autoScroll: A = "firstEnabledWithContext",
+  triggerTestId: x,
+  contentTestId: h,
+  isHydrated: m
 }) {
-  const g = ke(), E = n.useId(), R = f ?? `hours-picker-${E}`, V = n.useRef(null), j = n.useRef(null), Y = n.useRef(null), z = n.useRef(!1), [t, l] = n.useState(null), b = n.useRef(null), v = n.useRef(null), D = n.useRef(null), [_, le] = n.useState(() => ({
+  const E = n.useId(), k = a ?? `hours-picker-${E}`, M = n.useRef(null), N = n.useRef(null), F = n.useRef(null), H = n.useRef(!1), [S, K] = n.useState(null), Y = n.useRef(null), r = n.useRef(null), s = n.useRef(null), [p, w] = n.useState(() => ({
     left: 0,
     top: 0,
     width: 0
-  })), [ce, K] = n.useState(!1), S = H ?? ce, $ = h ?? K, ee = H !== void 0 && h !== void 0, te = r ?? (typeof u == "string" ? u : "Select time"), ue = typeof window > "u" ? n.useEffect : n.useLayoutEffect, q = n.useCallback((e) => {
-    Y.current = e, l(e);
-  }, []), ae = n.useCallback(() => {
-    z.current = !0;
+  })), [V, X] = n.useState(!1), j = D ?? V, $ = P ?? X, se = typeof window > "u" ? n.useEffect : n.useLayoutEffect, z = n.useCallback((e) => {
+    F.current = e, K(e);
+  }, []), ie = n.useCallback(() => {
+    H.current = !0;
   }, []);
   n.useEffect(() => {
-    if (!S) return;
-    const e = x.find((a) => a.value === i);
-    if (e && U(e)) {
-      q(e.value);
+    if (!j) return;
+    const e = o.find((f) => f.value === u);
+    if (e && W(e)) {
+      z(e.value);
       return;
     }
-    const o = x.find((a) => U(a));
-    q(o?.value ?? null);
-  }, [S, x, q, i]);
-  const X = n.useCallback(
+    const l = o.find((f) => W(f));
+    z(l?.value ?? null);
+  }, [j, o, z, u]);
+  const ee = n.useCallback(
     (e) => {
       if (e === null) {
-        s(null);
-        return;
-      }
-      const o = x.find((a) => a.value === e);
-      U(o) && s(e);
-    },
-    [s, x]
-  ), fe = n.useCallback(
-    (e) => {
-      if (ee) {
-        h?.(e);
+        t(null);
         return;
       }
-      if (g) {
-        K(e);
-        return;
-      }
-      e || K(!1);
+      const l = o.find((f) => f.value === e);
+      W(l) && t(e);
     },
-    [ee, g, h]
+    [t, o]
   );
   n.useEffect(() => {
-    if (g || !S) return;
-    const e = (o) => {
-      const a = o.target;
-      if (!(a instanceof Node))
+    if (!j) return;
+    const e = (l) => {
+      const f = l.target;
+      if (!(f instanceof Node))
         return;
-      const k = b.current;
-      !k || k.contains(a) || v.current?.contains(a) || $(!1);
+      const v = Y.current;
+      !v || v.contains(f) || r.current?.contains(f) || $(!1);
     };
     return document.addEventListener("pointerdown", e, !0), () => {
       document.removeEventListener("pointerdown", e, !0);
     };
-  }, [g, S, $]), n.useEffect(() => {
-    if (!S || H !== void 0 && !h || typeof window > "u" || !("IntersectionObserver" in window))
+  }, [j, $]), n.useEffect(() => {
+    if (!j || D !== void 0 && !P || typeof window > "u" || !("IntersectionObserver" in window))
       return;
-    const e = V.current;
+    const e = M.current;
     if (!(e instanceof HTMLElement))
       return;
-    let o = !0;
-    const a = new IntersectionObserver((k) => {
-      if (!o)
+    let l = !0;
+    const f = new IntersectionObserver((v) => {
+      if (!l)
         return;
-      const C = k[0];
-      C && !C.isIntersecting && $(!1);
+      const R = v[0];
+      R && !R.isIntersecting && $(!1);
     });
-    return a.observe(e), () => {
-      o = !1, a.disconnect();
+    return f.observe(e), () => {
+      l = !1, f.disconnect();
     };
-  }, [h, S, H, $, R]);
+  }, [P, j, D, $]);
   const B = n.useCallback(() => {
     if (typeof window > "u") return;
-    const e = V.current, o = v.current;
-    if (!(e instanceof HTMLElement) || !o) return;
-    const a = e.getBoundingClientRect(), k = o.offsetHeight, C = window.innerWidth ?? 0, L = window.innerHeight ?? 0, y = 8, G = a.width;
-    let W = a.left;
-    W + G > C - y && (W = Math.max(y, C - G - y)), W < y && (W = y);
-    let F = a.bottom + y;
-    const re = F + k > L - y, ne = a.top - k - y;
-    re && ne >= y && (F = ne), F < y && (F = y), F + k > L - y && (F = Math.max(y, L - k - y)), le({ left: W, top: F, width: G });
-  }, [R]);
-  return ue(() => {
-    if (g || !S || A || typeof window > "u") return;
+    const e = M.current, l = r.current;
+    if (!(e instanceof HTMLElement) || !l) return;
+    const f = e.getBoundingClientRect(), v = l.offsetHeight, R = window.innerWidth ?? 0, L = window.innerHeight ?? 0, y = 8, G = f.width;
+    let q = f.left;
+    q + G > R - y && (q = Math.max(y, R - G - y)), q < y && (q = y);
+    let C = f.bottom + y;
+    const U = C + v > L - y, _ = f.top - v - y;
+    U && _ >= y && (C = _), C < y && (C = y), C + v > L - y && (C = Math.max(y, L - v - y)), w({ left: q, top: C, width: G });
+  }, []);
+  return se(() => {
+    if (!j || b || typeof window > "u") return;
     B();
     const e = window.requestAnimationFrame(B);
     return window.addEventListener("scroll", B, !0), window.addEventListener("resize", B), () => {
       window.cancelAnimationFrame(e), window.removeEventListener("scroll", B, !0), window.removeEventListener("resize", B);
     };
-  }, [A, g, S, B]), n.useEffect(() => {
-    if (g || !S || !p) return;
-    const e = D.current;
+  }, [b, j, B]), n.useEffect(() => {
+    if (!j || !A) return;
+    const e = s.current;
     if (!e) return;
-    const a = requestAnimationFrame(() => {
-      if (e.querySelector(
-        '[role="option"][data-state="checked"]'
-      )) return;
-      const C = Array.from(e.querySelectorAll('[role="option"]'));
-      if (!C.length) return;
+    const f = requestAnimationFrame(() => {
+      const v = e.querySelector('[role="option"][data-state="checked"]');
+      if (v instanceof HTMLElement) {
+        const U = v.offsetTop - 8, _ = v.offsetTop + v.offsetHeight + 8;
+        if (U < e.scrollTop) {
+          e.scrollTop = Math.max(0, U);
+          return;
+        }
+        const le = e.scrollTop + e.clientHeight;
+        _ > le && (e.scrollTop = Math.max(0, _ - e.clientHeight));
+        return;
+      }
+      const R = Array.from(e.querySelectorAll('[role="option"]'));
+      if (!R.length) return;
       let L, y;
-      for (const F of C) {
-        if (!F.hasAttribute("data-disabled")) {
-          L = F;
+      for (const C of R) {
+        if (!C.hasAttribute("data-disabled")) {
+          L = C;
           break;
         }
-        y = F;
+        y = C;
       }
       if (!L) return;
-      const W = Math.max(0, (p === "firstEnabledWithContext" && y ? y : L).offsetTop - 8);
-      e.scrollTop = W;
+      const q = Math.max(0, (A === "firstEnabledWithContext" && y ? y : L).offsetTop - 8);
+      e.scrollTop = q;
     });
-    return () => cancelAnimationFrame(a);
-  }, [p, g, S, x]), n.useEffect(() => {
-    if (g || !S || !t || !z.current) return;
-    const e = D.current;
+    return () => cancelAnimationFrame(f);
+  }, [A, j, o]), n.useEffect(() => {
+    if (!j || !S || !H.current) return;
+    const e = s.current;
     if (!e) return;
-    const o = e.querySelector(`[role="option"][data-value="${t}"]`);
-    if (!(o instanceof HTMLElement)) return;
-    const a = 8, k = o.offsetTop - a, C = o.offsetTop + o.offsetHeight + a;
-    if (k < e.scrollTop) {
-      e.scrollTop = Math.max(0, k);
+    const l = e.querySelector(`[role="option"][data-value="${S}"]`);
+    if (!(l instanceof HTMLElement)) return;
+    const f = 8, v = l.offsetTop - f, R = l.offsetTop + l.offsetHeight + f;
+    if (v < e.scrollTop) {
+      e.scrollTop = Math.max(0, v);
       return;
     }
     const L = e.scrollTop + e.clientHeight;
-    C > L && (e.scrollTop = Math.max(0, C - e.clientHeight));
-  }, [t, g, S]), /* @__PURE__ */ c.jsxs(
+    R > L && (e.scrollTop = Math.max(0, R - e.clientHeight));
+  }, [S, j]), /* @__PURE__ */ c.jsx(
     "div",
     {
       "data-slot": "hours-picker-input",
-      className: O("w-[150px]", m),
-      ref: b,
-      children: [
-        u ? /* @__PURE__ */ c.jsx(
-          "label",
-          {
-            htmlFor: R,
-            className: O("block text-sm font-medium text-gray-700 mb-1 cursor-pointer", w),
-            children: u
-          }
-        ) : null,
-        g ? /* @__PURE__ */ c.jsxs(
-          he,
+      className: O("w-[150px]", d),
+      ref: Y,
+      children: /* @__PURE__ */ c.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ c.jsx(
+          ye,
           {
-            disabled: A,
-            open: S,
-            onOpenChange: fe,
-            value: i ?? "",
-            onValueChange: (e) => X(e),
-            children: [
-              /* @__PURE__ */ c.jsx(
-                ve,
-                {
-                  id: R,
-                  "data-testid": M,
-                  "data-hydrated": N ? "true" : void 0,
-                  className: O(
-                    "transition-colors hover:bg-accent hover:text-accent-foreground",
-                    !i && "text-muted-foreground",
-                    S && "ring-2 ring-primary ring-offset-2",
-                    I && "border-red-500",
-                    "[&_[data-slot='description']]:hidden",
-                    P
-                  ),
-                  children: /* @__PURE__ */ c.jsx(ge, { placeholder: te })
-                }
-              ),
-              /* @__PURE__ */ c.jsx(
-                xe,
-                {
-                  "data-testid": T,
-                  autoScroll: p,
-                  className: "max-h-64 overflow-y-auto",
-                  children: x.map((e) => /* @__PURE__ */ c.jsxs(
-                    we,
-                    {
-                      value: e.value,
-                      disabled: e.disabled,
-                      children: [
-                        /* @__PURE__ */ c.jsx("span", { children: e.label }),
-                        e.description != null ? /* @__PURE__ */ c.jsx("span", { "data-slot": "description", className: "block text-xs text-muted-foreground", children: e.description }) : null
-                      ]
-                    },
-                    e.value
-                  ))
-                }
-              )
-            ]
+            id: k,
+            placeholder: i,
+            value: u,
+            onChange: ee,
+            options: o,
+            autoComplete: I,
+            disabled: b,
+            readOnly: g,
+            open: j,
+            setOpen: $,
+            inputClassName: T,
+            triggerTestId: x,
+            isHydrated: m,
+            highlightedValueRef: F,
+            setHighlightedValue: z,
+            markKeyboardNavigation: ie,
+            inputRef: (e) => {
+              M.current = e;
+            },
+            setDraftValueRef: N
           }
-        ) : /* @__PURE__ */ c.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ c.jsx(
-            Se,
+        ),
+        j ? (() => {
+          const e = /* @__PURE__ */ c.jsx(ae, { children: /* @__PURE__ */ c.jsxs(
+            "div",
             {
-              id: R,
-              placeholder: te,
-              value: i,
-              onChange: X,
-              options: x,
-              autoComplete: d,
-              disabled: A,
-              open: S,
-              setOpen: $,
-              buttonClassName: P,
-              error: I,
-              triggerTestId: M,
-              isHydrated: N,
-              highlightedValueRef: Y,
-              setHighlightedValue: q,
-              markKeyboardNavigation: ae,
-              inputRef: (e) => {
-                V.current = e;
+              ref: r,
+              "data-testid": h,
+              "data-state": "open",
+              className: O(
+                "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: p.left,
+                top: p.top,
+                width: p.width
               },
-              setDraftValueRef: j
+              children: [
+                /* @__PURE__ */ c.jsx(
+                  re,
+                  {
+                    direction: "up",
+                    viewportRef: s
+                  }
+                ),
+                /* @__PURE__ */ c.jsx(
+                  "div",
+                  {
+                    ref: s,
+                    role: "listbox",
+                    className: "max-h-64 overflow-y-auto p-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+                    children: o.map((l) => {
+                      const f = l.value === u;
+                      return /* @__PURE__ */ c.jsxs(
+                        "div",
+                        {
+                          role: "option",
+                          "aria-selected": f,
+                          "data-value": l.value,
+                          "data-state": f ? "checked" : "unchecked",
+                          "data-disabled": l.disabled ? "" : void 0,
+                          className: O(
+                            "relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none cursor-pointer",
+                            l.disabled && "pointer-events-none opacity-50",
+                            S === l.value && "bg-accent text-accent-foreground"
+                          ),
+                          onMouseDown: (v) => {
+                            v.preventDefault();
+                          },
+                          onClick: () => {
+                            l.disabled || (N.current?.(l.value), z(l.value), M.current?.focus({ preventScroll: !0 }), ee(l.value), $(!1));
+                          },
+                          onPointerEnter: () => {
+                            H.current || (H.current = !1, z(l.value));
+                          },
+                          onPointerMove: (v) => {
+                            H.current && v.movementX === 0 && v.movementY === 0 || (H.current = !1, z(l.value));
+                          },
+                          children: [
+                            /* @__PURE__ */ c.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: f ? /* @__PURE__ */ c.jsx(ce, { "aria-hidden": !0, className: "h-4 w-4" }) : null }),
+                            /* @__PURE__ */ c.jsxs("div", { className: "flex flex-col", children: [
+                              /* @__PURE__ */ c.jsx("span", { children: l.label }),
+                              l.description != null ? /* @__PURE__ */ c.jsx("span", { "data-slot": "description", className: "text-xs text-muted-foreground", children: l.description }) : null
+                            ] })
+                          ]
+                        },
+                        l.value
+                      );
+                    })
+                  }
+                ),
+                /* @__PURE__ */ c.jsx(
+                  re,
+                  {
+                    direction: "down",
+                    viewportRef: s
+                  }
+                )
+              ]
             }
-          ),
-          S ? (() => {
-            const e = /* @__PURE__ */ c.jsxs(
-              "div",
+          ) });
+          return typeof document > "u" ? e : fe(e, document.body);
+        })() : null
+      ] })
+    }
+  );
+}
+oe.displayName = "HoursPickerInput";
+function we({
+  id: a,
+  value: u,
+  onChange: t,
+  options: o,
+  placeholder: i = "Select time",
+  className: I,
+  inputClassName: d,
+  disabled: T,
+  open: b,
+  onOpenChange: g,
+  autoScroll: D = "firstEnabledWithContext",
+  triggerTestId: P,
+  contentTestId: A,
+  isHydrated: x
+}) {
+  const h = n.useCallback(
+    (m) => {
+      const E = o.find((k) => k.value === m);
+      W(E) && t(m);
+    },
+    [t, o]
+  );
+  return /* @__PURE__ */ c.jsx("div", { "data-slot": "hours-picker-field", className: O("w-[150px]", I), children: /* @__PURE__ */ c.jsxs(
+    me,
+    {
+      disabled: T,
+      open: b,
+      onOpenChange: g,
+      value: u ?? "",
+      onValueChange: (m) => h(m),
+      children: [
+        /* @__PURE__ */ c.jsx(
+          pe,
+          {
+            id: a,
+            "data-testid": P,
+            "data-hydrated": x ? "true" : void 0,
+            className: O(
+              "transition-colors hover:bg-accent hover:text-accent-foreground",
+              !u && "text-muted-foreground",
+              b && "ring-2 ring-primary ring-offset-2",
+              "[&_[data-slot='description']]:hidden",
+              d
+            ),
+            children: /* @__PURE__ */ c.jsx(be, { placeholder: i })
+          }
+        ),
+        /* @__PURE__ */ c.jsx(
+          he,
+          {
+            "data-testid": A,
+            autoScroll: D,
+            className: "max-h-64 overflow-y-auto",
+            children: o.map((m) => /* @__PURE__ */ c.jsxs(
+              ve,
               {
-                ref: v,
-                "data-testid": T,
-                "data-state": "open",
-                className: O(
-                  "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: _.left,
-                  top: _.top,
-                  width: _.width
-                },
+                value: m.value,
+                disabled: m.disabled,
                 children: [
-                  /* @__PURE__ */ c.jsx(
-                    oe,
-                    {
-                      direction: "up",
-                      viewportRef: D
-                    }
-                  ),
-                  /* @__PURE__ */ c.jsx(
-                    "div",
-                    {
-                      ref: D,
-                      role: "listbox",
-                      className: "max-h-64 overflow-y-auto p-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
-                      children: x.map((o) => {
-                        const a = o.value === i;
-                        return /* @__PURE__ */ c.jsxs(
-                          "div",
-                          {
-                            role: "option",
-                            "aria-selected": a,
-                            "data-value": o.value,
-                            "data-state": a ? "checked" : "unchecked",
-                            "data-disabled": o.disabled ? "" : void 0,
-                            className: O(
-                              "relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none cursor-pointer",
-                              o.disabled && "pointer-events-none opacity-50",
-                              t === o.value && "bg-accent text-accent-foreground"
-                            ),
-                            onMouseDown: (k) => {
-                              k.preventDefault();
-                            },
-                            onClick: () => {
-                              o.disabled || (j.current?.(o.value), q(o.value), V.current?.focus({ preventScroll: !0 }), X(o.value), $(!1));
-                            },
-                            onPointerEnter: () => {
-                              z.current || (z.current = !1, q(o.value));
-                            },
-                            onPointerMove: (k) => {
-                              z.current && k.movementX === 0 && k.movementY === 0 || (z.current = !1, q(o.value));
-                            },
-                            children: [
-                              /* @__PURE__ */ c.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: a ? /* @__PURE__ */ c.jsx(de, { "aria-hidden": !0, className: "h-4 w-4" }) : null }),
-                              /* @__PURE__ */ c.jsxs("div", { className: "flex flex-col", children: [
-                                /* @__PURE__ */ c.jsx("span", { children: o.label }),
-                                o.description != null ? /* @__PURE__ */ c.jsx("span", { "data-slot": "description", className: "text-xs text-muted-foreground", children: o.description }) : null
-                              ] })
-                            ]
-                          },
-                          o.value
-                        );
-                      })
-                    }
-                  ),
-                  /* @__PURE__ */ c.jsx(
-                    oe,
-                    {
-                      direction: "down",
-                      viewportRef: D
-                    }
-                  )
+                  /* @__PURE__ */ c.jsx("span", { children: m.label }),
+                  m.description != null ? /* @__PURE__ */ c.jsx("span", { "data-slot": "description", className: "block text-xs text-muted-foreground", children: m.description }) : null
                 ]
-              }
-            );
-            return typeof document > "u" ? e : pe(e, document.body);
-          })() : null
-        ] }),
-        I ? /* @__PURE__ */ c.jsx("p", { className: "text-red-500 text-sm mt-1", children: I }) : null
+              },
+              m.value
+            ))
+          }
+        )
       ]
     }
-  );
+  ) });
+}
+function ke(a) {
+  return ge() ? /* @__PURE__ */ c.jsx(we, { ...a }) : /* @__PURE__ */ c.jsx(oe, { ...a });
 }
-Ne.displayName = "HoursPickerInput";
-function Se({
-  id: f,
+ke.displayName = "HoursPickerField";
+function ye({
+  id: a,
   placeholder: u,
-  value: r,
-  onChange: i,
-  options: s,
-  autoComplete: x,
+  value: t,
+  onChange: o,
+  options: i,
+  autoComplete: I,
   disabled: d,
-  open: m,
-  setOpen: w,
-  buttonClassName: P,
-  error: I,
-  triggerTestId: A,
-  isHydrated: H,
-  highlightedValueRef: h,
-  setHighlightedValue: p,
-  markKeyboardNavigation: M,
-  inputRef: T,
-  setDraftValueRef: N
+  readOnly: T,
+  open: b,
+  setOpen: g,
+  inputClassName: D,
+  triggerTestId: P,
+  isHydrated: A,
+  highlightedValueRef: x,
+  setHighlightedValue: h,
+  markKeyboardNavigation: m,
+  inputRef: E,
+  setDraftValueRef: k
 }) {
-  const g = n.useRef(!1), E = n.useRef(!1), R = n.useRef(!1), [V, j] = n.useState(() => r || "");
-  n.useEffect(() => (N.current = (t) => {
-    j(t);
+  const M = n.useRef(!1), N = n.useRef(!1), F = n.useRef(!1), [H, S] = n.useState(() => t || "");
+  n.useEffect(() => (k.current = (r) => {
+    S(r);
   }, () => {
-    N.current = null;
-  }), [N]);
-  const Y = n.useCallback(
-    (t) => {
-      const l = h.current ?? r ?? "";
-      let b = s.findIndex((v) => v.value === l);
-      b === -1 && (b = t === 1 ? -1 : s.length);
-      for (let v = b + t; v >= 0 && v < s.length; v += t) {
-        const D = s[v];
-        if (U(D)) {
-          p(D.value), j(D.value), r !== D.value && i(D.value);
+    k.current = null;
+  }), [k]);
+  const K = n.useCallback(
+    (r) => {
+      const s = x.current ?? t ?? "";
+      let p = i.findIndex((w) => w.value === s);
+      p === -1 && (p = r === 1 ? -1 : i.length);
+      for (let w = p + r; w >= 0 && w < i.length; w += r) {
+        const V = i[w];
+        if (W(V)) {
+          h(V.value), S(V.value), t !== V.value && o(V.value);
           return;
         }
       }
     },
-    [h, i, s, p, r]
+    [x, o, i, h, t]
   );
   n.useEffect(() => {
-    g.current || j(r || "");
-  }, [r]);
-  const z = O(
+    M.current || S(t || "");
+  }, [t]);
+  const Y = O(
     "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",
-    !V && "text-muted-foreground",
-    m && "ring-2 ring-primary ring-offset-2",
-    I && "border-red-500",
+    !H && "text-muted-foreground",
+    b && "ring-2 ring-primary ring-offset-2",
     "[&_[data-slot='description']]:hidden",
-    P
+    D
   );
   return /* @__PURE__ */ c.jsxs("div", { className: "relative group", children: [
     /* @__PURE__ */ c.jsx(
-      be,
+      de,
       {
-        id: f,
-        "data-testid": A,
-        "data-hydrated": H ? "true" : void 0,
+        id: a,
+        "data-testid": P,
+        "data-hydrated": A ? "true" : void 0,
         type: "text",
         disabled: d,
-        readOnly: d,
-        inputRef: T,
-        autoComplete: x ?? "off",
+        readOnly: T,
+        inputRef: E,
+        autoComplete: I ?? "off",
         mask: [
           { mask: "00:00", lazy: !0 },
           { mask: "0:00", lazy: !0 }
         ],
-        dispatch: (t, l) => {
-          const b = (l.value + t).replace(/\D/g, "");
-          if (b.length <= 2 || b.length >= 4) return l.compiledMasks[0];
-          const v = Q(Number(b.slice(0, 2)));
-          return s.some((_) => _.value.startsWith(`${v}:`)) ? l.compiledMasks[0] : l.compiledMasks[1];
+        dispatch: (r, s) => {
+          const p = (s.value + r).replace(/\D/g, "");
+          if (p.length <= 2 || p.length >= 4) return s.compiledMasks[0];
+          const w = Q(Number(p.slice(0, 2)));
+          return i.some((X) => X.value.startsWith(`${w}:`)) ? s.compiledMasks[0] : s.compiledMasks[1];
         },
         placeholder: u,
-        value: V,
-        className: z,
-        onAccept: (t) => {
-          const l = typeof t == "string" ? t : String(t ?? "");
-          j(l), l.replace(/\D/g, "").length === 0 && r && i(null);
+        value: H,
+        className: Y,
+        onAccept: (r) => {
+          const s = typeof r == "string" ? r : String(r ?? "");
+          S(s), s.replace(/\D/g, "").length === 0 && t && o(null);
         },
-        onComplete: (t) => {
-          const l = typeof t == "string" ? t : String(t ?? ""), b = J(l, s);
-          if (!b)
+        onComplete: (r) => {
+          const s = typeof r == "string" ? r : String(r ?? ""), p = J(s, i);
+          if (!p)
             return;
-          if (b.selectableValue) {
-            if (p(b.selectableValue), j(b.selectableValue), r === b.selectableValue)
+          if (p.selectableValue) {
+            if (h(p.selectableValue), S(p.selectableValue), t === p.selectableValue)
               return;
-            i(b.selectableValue);
+            o(p.selectableValue);
             return;
           }
-          const v = Z(b.parsed);
-          if (v == null)
+          const w = Z(p.parsed);
+          if (w == null)
             return;
-          const D = se(v, s);
-          D && p(D.value);
+          const V = te(w, i);
+          V && h(V.value);
         },
         onPointerDown: () => {
-          E.current = !0, !d && (m || w(!0));
+          N.current = !0, !d && (b || g(!0));
         },
-        onMouseDown: (t) => {
-          E.current = !0, R.current = typeof document < "u" && document.activeElement === t.currentTarget, !d && (m || w(!0));
+        onMouseDown: (r) => {
+          N.current = !0, F.current = typeof document < "u" && document.activeElement === r.currentTarget, !d && (b || g(!0));
         },
         onClick: () => {
-          d || m || w(!0);
+          d || b || g(!0);
         },
-        onKeyDown: (t) => {
+        onKeyDown: (r) => {
           if (!d) {
-            if (t.key === "Tab" && m && !t.defaultPrevented) {
-              w(!1);
+            if (r.key === "Tab" && b && !r.defaultPrevented) {
+              g(!1);
               return;
             }
-            if (t.key === "Escape") {
-              if (!m)
+            if (r.key === "Escape") {
+              if (!b)
                 return;
-              t.preventDefault(), w(!1);
+              r.preventDefault(), g(!1);
               return;
             }
-            if (t.key === "ArrowDown" || t.key === "ArrowUp") {
-              if (M(), t.preventDefault(), !m) {
-                w(!0);
+            if (r.key === "ArrowDown" || r.key === "ArrowUp") {
+              if (m(), r.preventDefault(), !b) {
+                g(!0);
                 return;
               }
-              Y(t.key === "ArrowDown" ? 1 : -1);
+              K(r.key === "ArrowDown" ? 1 : -1);
               return;
             }
-            if (t.key === "Enter") {
-              M();
-              const l = J(V, s);
-              if (!l)
+            if (r.key === "Enter") {
+              m();
+              const s = J(H, i);
+              if (!s)
                 return;
-              if (l.selectableValue) {
-                t.preventDefault(), p(l.selectableValue), j(l.selectableValue), r !== l.selectableValue && i(l.selectableValue), w(!1);
+              if (s.selectableValue) {
+                r.preventDefault(), h(s.selectableValue), S(s.selectableValue), t !== s.selectableValue && o(s.selectableValue), g(!1);
                 return;
               }
-              const b = Z(l.parsed);
-              if (b == null)
+              const p = Z(s.parsed);
+              if (p == null)
                 return;
-              const v = se(b, s);
-              if (!v)
+              const w = te(p, i);
+              if (!w)
                 return;
-              t.preventDefault(), p(v.value), j(v.value), r !== v.value && i(v.value), w(!1);
+              r.preventDefault(), h(w.value), S(w.value), t !== w.value && o(w.value), g(!1);
               return;
             }
           }
         },
-        onFocus: (t) => {
-          const l = !E.current || !R.current;
-          if (E.current = !1, R.current = !1, g.current = !0, l) {
-            const b = t.currentTarget;
-            requestAnimationFrame(() => b.select());
+        onFocus: (r) => {
+          const s = !N.current || !F.current;
+          if (N.current = !1, F.current = !1, M.current = !0, s) {
+            const p = r.currentTarget;
+            requestAnimationFrame(() => p.select());
           }
-          d || m || w(!0);
+          d || b || g(!0);
         },
         onBlur: () => {
-          g.current = !1;
-          const t = V.trim();
-          if (!t) {
-            j(r || "");
+          M.current = !1;
+          const r = H.trim();
+          if (!r) {
+            S(t || "");
             return;
           }
-          const l = J(t, s);
-          if (!l) {
-            j(r || "");
+          const s = J(r, i);
+          if (!s) {
+            S(t || "");
             return;
           }
-          if (!l.selectableValue) {
-            j(r || "");
+          if (!s.selectableValue) {
+            S(t || "");
             return;
           }
-          j(l.selectableValue), r !== l.selectableValue && i(l.selectableValue);
+          S(s.selectableValue), t !== s.selectableValue && o(s.selectableValue);
         }
       }
     ),
@@ -641,22 +651,23 @@ function Se({
         className: O(
           "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();
+        "aria-label": b ? "Close time picker" : "Open time picker",
+        onPointerDown: (r) => {
+          r.preventDefault();
         },
-        onMouseDown: (t) => {
-          t.preventDefault();
+        onMouseDown: (r) => {
+          r.preventDefault();
         },
         onClick: () => {
-          d || w(!m);
+          d || g(!b);
         },
-        children: /* @__PURE__ */ c.jsx(ie, { "aria-hidden": !0, className: "size-4" })
+        children: /* @__PURE__ */ c.jsx(ne, { "aria-hidden": !0, className: "size-4" })
       }
     )
   ] });
 }
 export {
-  Ne as HoursPickerInput
+  ke as HoursPickerField,
+  oe as HoursPickerInput
 };
 //# sourceMappingURL=index18.js.map