@rpcbase/ui 0.157.0 → 0.159.0

package/dist/index18.js

@@ -0,0 +1,663 @@
+import { j as c } from "./index28.js";
+import { Check as de, ChevronDown as ie, ChevronUp as me } from "lucide-react";
+import * as n from "react";
+import { DismissableLayerBranch as pe } from "./index29.js";
+import { createPortal as be } from "react-dom";
+import "./index30.js";
+import "./index31.js";
+import "./index32.js";
+import "./index33.js";
+import "./index34.js";
+import "./index35.js";
+import "./index36.js";
+import "./index37.js";
+import he from "./index38.js";
+import "./index39.js";
+import { Select as ve, SelectTrigger as ge, SelectValue as xe, SelectContent as we, SelectItem as ke } from "./index20.js";
+import { useIsTouchDevice as ye } from "./index4.js";
+import { cn as O } from "./index2.js";
+function Q(f) {
+  return String(f).padStart(2, "0");
+}
+function Ne(f) {
+  const u = f.trim();
+  if (!u) return null;
+  const r = /^(\d{1,2}):(\d{2})$/.exec(u);
+  if (!r)
+    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)}`;
+}
+function J(f, u) {
+  const r = Ne(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 Z(f) {
+  const u = /^(\d{2}):(\d{2})$/.exec(f);
+  if (!u)
+    return null;
+  const r = Number(u[1]), i = Number(u[2]);
+  return !Number.isFinite(r) || !Number.isFinite(i) ? null : r * 60 + i;
+}
+function U(f) {
+  return f ? !f.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);
+    if (d == null) continue;
+    const m = Math.abs(d - f);
+    (m < i || m === i && d > s) && (r = x, i = m, s = d);
+  }
+  return r;
+}
+function oe({
+  direction: f,
+  viewportRef: u,
+  speed: r = 400,
+  className: i
+}) {
+  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);
+      return;
+    }
+    const { scrollTop: p, scrollHeight: M, clientHeight: T } = h, N = 2, g = p > N, D = p < M - T - N;
+    if (!(M > T + N)) {
+      x(!0);
+      return;
+    }
+    x(f === "up" ? !g : !D);
+  }, [f, 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();
+    };
+  }, [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();
+        return;
+      }
+      m.current || (m.current = h);
+      const M = h - m.current, T = r * M / 1e3;
+      if (T < 0.1) {
+        d.current = requestAnimationFrame(A);
+        return;
+      }
+      const N = p.scrollTop, g = p.scrollHeight - p.clientHeight;
+      let D;
+      f === "up" ? D = Math.max(0, N - T) : D = Math.min(g, N + T), p.scrollTop = D, m.current = h;
+      const R = 1;
+      (f === "up" ? D > R : D < g - R) && Math.abs(D - N) > 0.01 ? d.current = requestAnimationFrame(A) : (I(), setTimeout(P, 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(
+    "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
+      ),
+      onPointerEnter: () => {
+        s || H();
+      },
+      onPointerMove: () => {
+        !s && !w.current && H();
+      },
+      onPointerLeave: () => {
+        I();
+      },
+      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" })
+    }
+  );
+}
+function Se({
+  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
+}) {
+  const g = ye(), D = n.useId(), R = f ?? `hours-picker-${D}`, 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), E = n.useRef(null), [_, le] = 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;
+  }, []);
+  n.useEffect(() => {
+    if (!S) return;
+    const e = x.find((a) => a.value === i);
+    if (e && U(e)) {
+      q(e.value);
+      return;
+    }
+    const o = x.find((a) => U(a));
+    q(o?.value ?? null);
+  }, [S, x, q, i]);
+  const X = 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);
+        return;
+      }
+      if (g) {
+        K(e);
+        return;
+      }
+      e || K(!1);
+    },
+    [ee, g, h]
+  );
+  n.useEffect(() => {
+    if (g || !S) return;
+    const e = (o) => {
+      const a = o.target;
+      if (!(a instanceof Node))
+        return;
+      const k = b.current;
+      !k || k.contains(a) || v.current?.contains(a) || $(!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))
+      return;
+    const e = V.current;
+    if (!(e instanceof HTMLElement))
+      return;
+    let o = !0;
+    const a = new IntersectionObserver((k) => {
+      if (!o)
+        return;
+      const C = k[0];
+      C && !C.isIntersecting && $(!1);
+    });
+    return a.observe(e), () => {
+      o = !1, a.disconnect();
+    };
+  }, [h, S, H, $, R]);
+  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;
+    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 = E.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;
+      let L, y;
+      for (const F of C) {
+        if (!F.hasAttribute("data-disabled")) {
+          L = F;
+          break;
+        }
+        y = F;
+      }
+      if (!L) return;
+      const W = Math.max(0, (p === "firstEnabledWithContext" && y ? y : L).offsetTop - 8);
+      e.scrollTop = W;
+    });
+    return () => cancelAnimationFrame(a);
+  }, [p, g, S, x]), n.useEffect(() => {
+    if (g || !S || !t || !z.current) return;
+    const e = E.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);
+      return;
+    }
+    const L = e.scrollTop + e.clientHeight;
+    C > L && (e.scrollTop = Math.max(0, C - e.clientHeight));
+  }, [t, g, S]), /* @__PURE__ */ c.jsxs(
+    "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(
+          ve,
+          {
+            disabled: A,
+            open: S,
+            onOpenChange: fe,
+            value: i ?? "",
+            onValueChange: (e) => X(e),
+            children: [
+              /* @__PURE__ */ c.jsx(
+                ge,
+                {
+                  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(xe, { placeholder: te })
+                }
+              ),
+              /* @__PURE__ */ c.jsx(
+                we,
+                {
+                  "data-testid": T,
+                  autoScroll: p,
+                  className: "max-h-64 overflow-y-auto",
+                  children: x.map((e) => /* @__PURE__ */ c.jsxs(
+                    ke,
+                    {
+                      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
+                  ))
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ c.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ c.jsx(
+            De,
+            {
+              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;
+              },
+              setDraftValueRef: j
+            }
+          ),
+          S ? (() => {
+            const e = /* @__PURE__ */ c.jsx(pe, { children: /* @__PURE__ */ c.jsxs(
+              "div",
+              {
+                ref: v,
+                "data-testid": T,
+                "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: _.left,
+                  top: _.top,
+                  width: _.width
+                },
+                children: [
+                  /* @__PURE__ */ c.jsx(
+                    oe,
+                    {
+                      direction: "up",
+                      viewportRef: E
+                    }
+                  ),
+                  /* @__PURE__ */ c.jsx(
+                    "div",
+                    {
+                      ref: E,
+                      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: E
+                    }
+                  )
+                ]
+              }
+            ) });
+            return typeof document > "u" ? e : be(e, document.body);
+          })() : null
+        ] }),
+        I ? /* @__PURE__ */ c.jsx("p", { className: "text-red-500 text-sm mt-1", children: I }) : null
+      ]
+    }
+  );
+}
+Se.displayName = "HoursPickerInput";
+function De({
+  id: f,
+  placeholder: u,
+  value: r,
+  onChange: i,
+  options: s,
+  autoComplete: x,
+  disabled: d,
+  open: m,
+  setOpen: w,
+  buttonClassName: P,
+  error: I,
+  triggerTestId: A,
+  isHydrated: H,
+  highlightedValueRef: h,
+  setHighlightedValue: p,
+  markKeyboardNavigation: M,
+  inputRef: T,
+  setDraftValueRef: N
+}) {
+  const g = n.useRef(!1), D = n.useRef(!1), R = n.useRef(!1), [V, j] = n.useState(() => r || "");
+  n.useEffect(() => (N.current = (t) => {
+    j(t);
+  }, () => {
+    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 E = s[v];
+        if (U(E)) {
+          p(E.value), j(E.value), r !== E.value && i(E.value);
+          return;
+        }
+      }
+    },
+    [h, i, s, p, r]
+  );
+  n.useEffect(() => {
+    g.current || j(r || "");
+  }, [r]);
+  const z = 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",
+    "[&_[data-slot='description']]:hidden",
+    P
+  );
+  return /* @__PURE__ */ c.jsxs("div", { className: "relative group", children: [
+    /* @__PURE__ */ c.jsx(
+      he,
+      {
+        id: f,
+        "data-testid": A,
+        "data-hydrated": H ? "true" : void 0,
+        type: "text",
+        disabled: d,
+        readOnly: d,
+        inputRef: T,
+        autoComplete: x ?? "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];
+        },
+        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);
+        },
+        onComplete: (t) => {
+          const l = typeof t == "string" ? t : String(t ?? ""), b = J(l, s);
+          if (!b)
+            return;
+          if (b.selectableValue) {
+            if (p(b.selectableValue), j(b.selectableValue), r === b.selectableValue)
+              return;
+            i(b.selectableValue);
+            return;
+          }
+          const v = Z(b.parsed);
+          if (v == null)
+            return;
+          const E = se(v, s);
+          E && p(E.value);
+        },
+        onPointerDown: () => {
+          D.current = !0, !d && (m || w(!0));
+        },
+        onMouseDown: (t) => {
+          D.current = !0, R.current = typeof document < "u" && document.activeElement === t.currentTarget, !d && (m || w(!0));
+        },
+        onClick: () => {
+          d || m || w(!0);
+        },
+        onKeyDown: (t) => {
+          if (!d) {
+            if (t.key === "Tab" && m && !t.defaultPrevented) {
+              w(!1);
+              return;
+            }
+            if (t.key === "Escape") {
+              if (!m)
+                return;
+              t.preventDefault(), w(!1);
+              return;
+            }
+            if (t.key === "ArrowDown" || t.key === "ArrowUp") {
+              if (M(), t.preventDefault(), !m) {
+                w(!0);
+                return;
+              }
+              Y(t.key === "ArrowDown" ? 1 : -1);
+              return;
+            }
+            if (t.key === "Enter") {
+              M();
+              const l = J(V, s);
+              if (!l)
+                return;
+              if (l.selectableValue) {
+                t.preventDefault(), p(l.selectableValue), j(l.selectableValue), r !== l.selectableValue && i(l.selectableValue), w(!1);
+                return;
+              }
+              const b = Z(l.parsed);
+              if (b == null)
+                return;
+              const v = se(b, s);
+              if (!v)
+                return;
+              t.preventDefault(), p(v.value), j(v.value), r !== v.value && i(v.value), w(!1);
+              return;
+            }
+          }
+        },
+        onFocus: (t) => {
+          const l = !D.current || !R.current;
+          if (D.current = !1, R.current = !1, g.current = !0, l) {
+            const b = t.currentTarget;
+            requestAnimationFrame(() => b.select());
+          }
+          d || m || w(!0);
+        },
+        onBlur: () => {
+          g.current = !1;
+          const t = V.trim();
+          if (!t) {
+            j(r || "");
+            return;
+          }
+          const l = J(t, s);
+          if (!l) {
+            j(r || "");
+            return;
+          }
+          if (!l.selectableValue) {
+            j(r || "");
+            return;
+          }
+          j(l.selectableValue), r !== l.selectableValue && i(l.selectableValue);
+        }
+      }
+    ),
+    /* @__PURE__ */ c.jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        disabled: d,
+        "data-slot": "hours-picker-input-toggle",
+        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();
+        },
+        onMouseDown: (t) => {
+          t.preventDefault();
+        },
+        onClick: () => {
+          d || w(!m);
+        },
+        children: /* @__PURE__ */ c.jsx(ie, { "aria-hidden": !0, className: "size-4" })
+      }
+    )
+  ] });
+}
+export {
+  Se as HoursPickerInput
+};
+//# sourceMappingURL=index18.js.map