@rpcbase/ui 0.161.0 → 0.163.0

package/dist/index18.js

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