@koide-labs/ui 0.0.15 → 0.1.1

package/dist/components/number-input/number-input.js

@@ -0,0 +1,1169 @@
+import { jsxs as Ue, jsx as se } from "react/jsx-runtime";
+import { c as Ot } from "../../clsx-OuTLNxxd.js";
+import * as o from "react";
+import { useId as Ut } from "react";
+import { Text as kt } from "../text/text.js";
+import { Input as Wt } from "../input/input.js";
+import { View as Ht } from "../view/view.js";
+import { IconButton as tt } from "../icon-button/icon-button.js";
+import { S as Gt } from "../../separator-fh_wDZNf.js";
+import { u as Bt } from "../../useControlled-Du4sJyMj.js";
+import { u as de } from "../../useStableCallback-DKZHlUAT.js";
+import { T as $t, u as Ke } from "../../useTimeout-BNni6aw5.js";
+import { a as Kt, d as Yt, u as xe } from "../../useRenderElement-DngNDu_P.js";
+import { u as jt } from "../../useOnMount-VRW6CK2u.js";
+import { u as Ge } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { u as nt } from "../../useValueAsRef-B4EriRsI.js";
+import { v as zt } from "../../visuallyHidden-CpJ-mhai.js";
+import { o as Ye } from "../../owner-rKN292Q9.js";
+import { c as Xt, e as qt, d as Zt } from "../../detectBrowser-Bl8Ki_1I.js";
+import { f as Jt } from "../../formatErrorMessage-BqPuTBN-.js";
+import { a as ft, c as Qt, u as en, b as tn, f as nn } from "../../LabelableContext-Be1u-eFg.js";
+import { u as rn } from "../../useLabelableId-CX4tcfzK.js";
+import { g as ke, f as Te, a as dt } from "../../formatNumber-1UNwjeqf.js";
+import { c as sn } from "../../clamp-D0KDAQIz.js";
+import { c as ce, g as _e, n as on, h as un, k as Ae, j as Be, m as rt, p as st, s as ot } from "../../createBaseUIEventDetails-CCSfZ2vM.js";
+import { g as We } from "../../floating-ui.utils.dom-cbi420Pg.js";
+import * as it from "react-dom";
+import { u as an } from "../../useValueChanged-MJRmEWz1.js";
+import { s as cn } from "../../event-B89-Ng5h.js";
+import { u as mt } from "../../useButton-d3_JgBNr.js";
+import '../../number-input.css';function ln() {
+  const [, n] = o.useState({});
+  return o.useCallback(() => {
+    n({});
+  }, []);
+}
+const ut = 0;
+class Xe extends $t {
+  static create() {
+    return new Xe();
+  }
+  /**
+   * Executes `fn` at `delay` interval, clearing any previously scheduled call.
+   */
+  start(r, t) {
+    this.clear(), this.currentId = setInterval(() => {
+      t();
+    }, r);
+  }
+  clear = () => {
+    this.currentId !== ut && (clearInterval(this.currentId), this.currentId = ut);
+  };
+}
+function fn() {
+  const n = Kt(Xe.create).current;
+  return jt(n.disposeEffect), n;
+}
+const qe = /* @__PURE__ */ o.createContext(void 0);
+process.env.NODE_ENV !== "production" && (qe.displayName = "NumberFieldRootContext");
+function De() {
+  const n = o.useContext(qe);
+  if (n === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: NumberFieldRootContext is missing. NumberField parts must be placed within <NumberField.Root>." : Jt(43));
+  return n;
+}
+const ye = {
+  inputValue: () => null,
+  value: () => null
+}, dn = ["零", "〇", "一", "二", "三", "四", "五", "六", "七", "八", "九"], mn = {
+  零: "0",
+  "〇": "0",
+  一: "1",
+  二: "2",
+  三: "3",
+  四: "4",
+  五: "5",
+  六: "6",
+  七: "7",
+  八: "8",
+  九: "9"
+}, pt = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"], gt = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"], Ze = ["０", "１", "２", "３", "４", "５", "６", "７", "８", "９"], ht = ["%", "٪", "％", "﹪"], Et = ["‰", "؉"], bt = ["−", "－", "‒", "–", "—", "﹣"], Rt = ["＋", "﹢"], pn = "．", gn = "，", hn = new RegExp(`[${pt.join("")}]`, "g"), En = new RegExp(`[${gt.join("")}]`, "g"), bn = new RegExp(`[${Ze.join("")}]`, "g"), Rn = new RegExp(`[${dn.join("")}]`, "g"), Nn = new RegExp(`[${ht.join("")}]`), Sn = new RegExp(`[${Et.join("")}]`), je = /[٠١٢٣٤٥٦٧٨٩]/, Nt = /[۰۱۲۳۴۵۶۷۸۹]/, ze = /[零〇一二三四五六七八九]/, at = new RegExp(`[${Ze.join("")}]`), _n = [".", ",", pn, gn, "٫", "٬"], ct = new RegExp("\\p{Zs}", "u"), xn = ["+", ...Rt], yn = ["-", ...bt], Le = (n) => n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), Cn = (n) => n.replace(/[-\\\]^]/g, (r) => `\\${r}`), St = (n) => `[${n.map(Cn).join("")}]`, _t = St(["-"].concat(bt)), xt = St(["+"].concat(Rt)), yt = new RegExp(_t, "gu"), Ct = new RegExp(xt, "gu"), ve = new RegExp(_t), Oe = new RegExp(xt);
+function Je(n, r) {
+  const t = ke(n, r).formatToParts(11111.1), s = {};
+  return t.forEach((a) => {
+    s[a.type] = a.value;
+  }), ke(n).formatToParts(0.1).forEach((a) => {
+    a.type === "decimal" && (s[a.type] = a.value);
+  }), s;
+}
+function Se(n, r, t) {
+  if (n == null)
+    return null;
+  let s = String(n).replace(new RegExp("\\p{Cf}", "gu"), "").trim();
+  s = s.replace(yt, "-").replace(Ct, "+");
+  let a = !1;
+  const f = s.match(/([+-])\s*$/);
+  f && (f[1] === "-" && (a = !0), s = s.replace(/([+-])\s*$/, ""));
+  const S = s.match(/^\s*([+-])/);
+  S && (S[1] === "-" && (a = !0), s = s.replace(/^\s*[+-]/, ""));
+  let p = r;
+  p === void 0 && (je.test(s) || Nt.test(s) ? p = "ar" : ze.test(s) && (p = "zh"));
+  const {
+    group: m,
+    decimal: _,
+    currency: b
+  } = Je(p, t), R = ke(p, t).formatToParts(1).filter((c) => c.type === "unit").map((c) => Le(c.value)), K = R.length ? new RegExp(R.join("|"), "g") : null;
+  let G = null;
+  m && (new RegExp("\\p{Zs}", "u").test(m) ? G = new RegExp("\\p{Zs}", "gu") : m === "'" || m === "’" ? G = /['’]/g : G = new RegExp(Le(m), "g"));
+  let w = [
+    {
+      regex: m ? G : null,
+      replacement: ""
+    },
+    {
+      regex: _ ? new RegExp(Le(_), "g") : null,
+      replacement: "."
+    },
+    // Fullwidth punctuation
+    {
+      regex: /．/g,
+      replacement: "."
+    },
+    // FULLWIDTH_DECIMAL
+    {
+      regex: /，/g,
+      replacement: ""
+    },
+    // FULLWIDTH_GROUP
+    // Arabic punctuation
+    {
+      regex: /٫/g,
+      replacement: "."
+    },
+    // ARABIC DECIMAL SEPARATOR (U+066B)
+    {
+      regex: /٬/g,
+      replacement: ""
+    },
+    // ARABIC THOUSANDS SEPARATOR (U+066C)
+    // Currency & unit labels
+    {
+      regex: b ? new RegExp(Le(b), "g") : null,
+      replacement: ""
+    },
+    {
+      regex: K,
+      replacement: ""
+    },
+    // Numeral systems to ASCII digits
+    {
+      regex: hn,
+      replacement: (c) => String(pt.indexOf(c))
+    },
+    {
+      regex: En,
+      replacement: (c) => String(gt.indexOf(c))
+    },
+    {
+      regex: bn,
+      replacement: (c) => String(Ze.indexOf(c))
+    },
+    {
+      regex: Rn,
+      replacement: (c) => mn[c]
+    }
+  ].reduce((c, {
+    regex: W,
+    replacement: x
+  }) => W ? c.replace(W, x) : c, s);
+  const O = w.lastIndexOf(".");
+  if (O !== -1 && (w = `${w.slice(0, O).replace(/\./g, "")}.${w.slice(O + 1).replace(/\./g, "")}`), /^[-+]?Infinity$/i.test(s) || /[∞]/.test(s))
+    return null;
+  const q = (a ? "-" : "") + w;
+  let V = parseFloat(q);
+  const g = t?.style, d = g === "unit" && t?.unit === "percent", k = Nn.test(n) || g === "percent";
+  return Sn.test(n) ? V /= 1e3 : !d && k && (V /= 100), Number.isNaN(V) ? null : V;
+}
+const In = 60, An = 400, vn = 50, Tn = 3, Pn = 8, Pe = 1, Dn = 1e-10;
+function Vn(n) {
+  const r = ke("en-US").resolvedOptions(), t = n?.minimumFractionDigits ?? r.minimumFractionDigits ?? 0;
+  return {
+    maximumFractionDigits: Math.max(n?.maximumFractionDigits ?? r.maximumFractionDigits ?? 20, t),
+    minimumFractionDigits: t
+  };
+}
+function Fn(n, r) {
+  if (!Number.isFinite(n))
+    return n;
+  const t = Math.min(Math.max(r, 0), 20);
+  return Number(n.toFixed(t));
+}
+function $e(n, r) {
+  const {
+    maximumFractionDigits: t
+  } = Vn(r);
+  return Fn(n, t);
+}
+function wn(n, r, t, s = "directional") {
+  if (t === 0)
+    return n;
+  const a = Math.abs(t), f = Math.sign(t), S = a * Dn * f, p = s === "nearest" ? t : a, m = (n - r + S) / p;
+  let _;
+  return s === "nearest" ? _ = Math.round(m) : f > 0 ? _ = Math.floor(m) : _ = Math.ceil(m), r + _ * (s === "nearest" ? t : a);
+}
+function Mn(n, {
+  step: r,
+  minWithDefault: t,
+  maxWithDefault: s,
+  minWithZeroDefault: a,
+  format: f,
+  snapOnStep: S,
+  small: p
+}) {
+  if (n === null)
+    return n;
+  const m = sn(n, t, s);
+  if (r != null && S) {
+    if (r === 0)
+      return $e(m, f);
+    let _ = a;
+    !p && t !== Number.MIN_SAFE_INTEGER && (_ = t);
+    const b = wn(m, _, r, p ? "nearest" : "directional");
+    return $e(b, f);
+  }
+  return $e(m, f);
+}
+const It = /* @__PURE__ */ o.forwardRef(function(r, t) {
+  const {
+    id: s,
+    min: a,
+    max: f,
+    smallStep: S = 0.1,
+    step: p = 1,
+    largeStep: m = 10,
+    required: _ = !1,
+    disabled: b = !1,
+    readOnly: R = !1,
+    name: K,
+    defaultValue: G,
+    value: h,
+    onValueChange: w,
+    onValueCommitted: O,
+    allowWheelScrub: q = !1,
+    snapOnStep: V = !1,
+    format: g,
+    locale: d,
+    render: k,
+    className: Y,
+    inputRef: c,
+    ...W
+  } = r, {
+    setDirty: x,
+    validityData: H,
+    disabled: j,
+    setFilled: z,
+    invalid: v,
+    name: Q,
+    state: U,
+    validation: ee,
+    shouldValidateOnChange: i
+  } = ft(), I = j || b, X = Q ?? K, [M, N] = o.useState(!1), y = a ?? Number.MIN_SAFE_INTEGER, L = f ?? Number.MAX_SAFE_INTEGER, Z = a ?? 0, A = g?.style, e = o.useRef(null), u = Yt(c, ee.inputRef), T = rn({
+    id: s
+  }), [P, J] = Bt({
+    controlled: h,
+    default: G,
+    name: "NumberField",
+    state: "value"
+  }), l = P ?? null, oe = nt(l);
+  Ge(() => {
+    z(l !== null);
+  }, [z, l]);
+  const te = ln(), ie = nt(g), re = o.useRef(!1), ue = de((F, E) => {
+    re.current = !1, O?.(F, E);
+  }), fe = Ke(), ge = fn(), he = Ke(), Ve = o.useRef(!1), Fe = o.useRef(0), me = o.useRef(!0), Ee = o.useRef(null), pe = o.useRef(() => {
+  }), [D, le] = o.useState(() => h !== void 0 ? lt(l, d, g) : Te(l, d, g)), [we, wt] = o.useState("numeric"), Qe = de(() => {
+    const {
+      decimal: F,
+      group: E,
+      currency: B,
+      literal: $
+    } = Je(d, g), C = /* @__PURE__ */ new Set();
+    _n.forEach((ne) => C.add(ne)), F && C.add(F), E && (C.add(E), ct.test(E) && C.add(" "));
+    const ae = A === "percent" || A === "unit" && g?.unit === "percent", Ie = A === "percent" || A === "unit" && g?.unit === "permille";
+    return ae && ht.forEach((ne) => C.add(ne)), Ie && Et.forEach((ne) => C.add(ne)), A === "currency" && B && C.add(B), $ && (Array.from($).forEach((ne) => C.add(ne)), ct.test($) && C.add(" ")), xn.forEach((ne) => C.add(ne)), y < 0 && yn.forEach((ne) => C.add(ne)), C;
+  }), be = de((F) => F?.altKey ? S : F?.shiftKey ? m : p), Me = de((F, E) => {
+    const B = E.event, $ = E.direction, C = Mn(F, {
+      step: $ ? be(B) * $ : void 0,
+      format: ie.current,
+      minWithDefault: y,
+      maxWithDefault: L,
+      minWithZeroDefault: Z,
+      snapOnStep: V,
+      small: B?.altKey ?? !1
+    });
+    if (C !== l || F !== l || me.current === !1) {
+      if (Ee.current = C, w?.(C, E), E.isCanceled)
+        return;
+      J(C), x(C !== H.initialValue), re.current = !0;
+    }
+    me.current && le(Te(C, d, g)), te();
+  }), Ce = de((F, {
+    direction: E,
+    currentValue: B,
+    event: $,
+    reason: C
+  }) => {
+    const ae = B ?? oe.current, Ie = typeof ae == "number" ? ae + F * E : Math.max(0, a ?? 0);
+    Me(Ie, ce(C, $, void 0, {
+      direction: E
+    }));
+  }), Re = de(() => {
+    he.clear(), fe.clear(), ge.clear(), pe.current(), Fe.current = 0;
+  }), et = de((F, E) => {
+    if (Re(), !e.current)
+      return;
+    const B = We(e.current);
+    function $(ae) {
+      ae.preventDefault();
+    }
+    B.addEventListener("contextmenu", $), pe.current = () => {
+      B.removeEventListener("contextmenu", $);
+    }, B.addEventListener("pointerup", (ae) => {
+      Ve.current = !1, Re();
+      const Ie = Ee.current ?? oe.current;
+      ue(Ie, _e(F ? "increment" : "decrement", ae));
+    }, {
+      once: !0
+    });
+    function C() {
+      const ae = be(E) ?? Pe;
+      Ce(ae, {
+        direction: F ? 1 : -1,
+        event: E,
+        reason: F ? "increment-press" : "decrement-press"
+      });
+    }
+    C(), fe.start(An, () => {
+      ge.start(In, C);
+    });
+  });
+  Ge(function() {
+    if (!me.current)
+      return;
+    const E = h !== void 0 ? lt(l, d, g) : Te(l, d, g);
+    E !== D && le(E);
+  }), Ge(function() {
+    if (!Xt)
+      return;
+    let E = "text";
+    y >= 0 && (E = "decimal"), wt(E);
+  }, [y, A]), o.useEffect(() => () => Re(), [Re]), o.useEffect(function() {
+    const E = e.current;
+    if (I || R || !q || !E)
+      return;
+    function B($) {
+      if (
+        // Allow pinch-zooming.
+        $.ctrlKey || Ye(e.current).activeElement !== e.current
+      )
+        return;
+      $.preventDefault();
+      const C = be($) ?? Pe;
+      Ce(C, {
+        direction: $.deltaY > 0 ? -1 : 1,
+        event: $,
+        reason: "wheel"
+      });
+    }
+    return E.addEventListener("wheel", B), () => {
+      E.removeEventListener("wheel", B);
+    };
+  }, [q, Ce, I, R, m, p, be]);
+  const He = o.useMemo(() => ({
+    ...U,
+    disabled: I,
+    readOnly: R,
+    required: _,
+    value: l,
+    inputValue: D,
+    scrubbing: M
+  }), [U, I, R, _, l, D, M]), Mt = o.useMemo(() => ({
+    inputRef: e,
+    inputValue: D,
+    value: l,
+    startAutoChange: et,
+    stopAutoChange: Re,
+    minWithDefault: y,
+    maxWithDefault: L,
+    disabled: I,
+    readOnly: R,
+    id: T,
+    setValue: Me,
+    incrementValue: Ce,
+    getStepAmount: be,
+    allowInputSyncRef: me,
+    formatOptionsRef: ie,
+    valueRef: oe,
+    lastChangedValueRef: Ee,
+    hasPendingCommitRef: re,
+    isPressedRef: Ve,
+    intentionalTouchCheckTimeout: he,
+    movesAfterTouchRef: Fe,
+    name: X,
+    required: _,
+    invalid: v,
+    inputMode: we,
+    getAllowedNonNumericKeys: Qe,
+    min: a,
+    max: f,
+    setInputValue: le,
+    locale: d,
+    isScrubbing: M,
+    setIsScrubbing: N,
+    state: He,
+    onValueCommitted: ue
+  }), [e, D, l, et, Re, y, L, I, R, T, Me, Ce, be, ie, oe, he, X, _, v, we, Qe, a, f, le, d, M, He, ue]), Lt = xe("div", r, {
+    ref: t,
+    state: He,
+    props: W,
+    stateAttributesMapping: ye
+  });
+  return /* @__PURE__ */ Ue(qe.Provider, {
+    value: Mt,
+    children: [Lt, /* @__PURE__ */ se("input", {
+      ...ee.getInputValidationProps({
+        onChange(F) {
+          if (F.nativeEvent.defaultPrevented)
+            return;
+          const E = F.currentTarget.valueAsNumber, B = Number.isNaN(E) ? null : E, $ = ce(on, F.nativeEvent);
+          x(B !== H.initialValue), Me(B, $), i() && ee.commit(B);
+        }
+      }),
+      ref: u,
+      type: "number",
+      name: X,
+      value: l ?? "",
+      min: a,
+      max: f,
+      step: p,
+      disabled: I,
+      required: _,
+      "aria-hidden": !0,
+      tabIndex: -1,
+      style: zt
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (It.displayName = "NumberFieldRoot");
+function lt(n, r, t) {
+  return t?.maximumFractionDigits != null || t?.minimumFractionDigits != null ? Te(n, r, t) : dt(n, r, t);
+}
+const At = /* @__PURE__ */ o.forwardRef(function(r, t) {
+  const {
+    render: s,
+    className: a,
+    ...f
+  } = r, {
+    state: S
+  } = De();
+  return xe("div", r, {
+    ref: t,
+    state: S,
+    props: [{
+      role: "group"
+    }, f],
+    stateAttributesMapping: ye
+  });
+});
+process.env.NODE_ENV !== "production" && (At.displayName = "NumberFieldGroup");
+function vt(n) {
+  const {
+    allowInputSyncRef: r,
+    disabled: t,
+    formatOptionsRef: s,
+    getStepAmount: a,
+    id: f,
+    incrementValue: S,
+    inputRef: p,
+    inputValue: m,
+    intentionalTouchCheckTimeout: _,
+    isIncrement: b,
+    isPressedRef: R,
+    locale: K,
+    maxWithDefault: G,
+    minWithDefault: h,
+    movesAfterTouchRef: w,
+    readOnly: O,
+    setValue: q,
+    startAutoChange: V,
+    stopAutoChange: g,
+    value: d,
+    valueRef: k,
+    lastChangedValueRef: Y,
+    onValueCommitted: c
+  } = n, W = o.useRef({
+    x: 0,
+    y: 0
+  }), x = o.useRef(!1), H = o.useRef(!1), j = o.useRef(""), z = d != null && d <= h, v = d != null && d >= G, Q = b ? "increment-press" : "decrement-press";
+  function U(i) {
+    r.current = !0;
+    const I = Se(m, K, s.current);
+    I !== null && (k.current = I, q(I, ce(Q, i, void 0, {
+      direction: b ? 1 : -1
+    })));
+  }
+  return {
+    disabled: t || (b ? v : z),
+    "aria-readonly": O || void 0,
+    "aria-label": b ? "Increase" : "Decrease",
+    "aria-controls": f,
+    // Keyboard users shouldn't have access to the buttons, since they can use the input element
+    // to change the value. On the other hand, `aria-hidden` is not applied because touch screen
+    // readers should be able to use the buttons.
+    tabIndex: -1,
+    style: {
+      WebkitUserSelect: "none",
+      userSelect: "none"
+    },
+    onTouchStart() {
+      x.current = !0;
+    },
+    onTouchEnd() {
+      x.current = !1;
+    },
+    onClick(i) {
+      const I = t || O || (b ? v : z);
+      if (i.defaultPrevented || I || // If it's not a keyboard/virtual click, ignore.
+      (j.current === "touch" ? H.current : i.detail !== 0))
+        return;
+      U(i.nativeEvent);
+      const X = a(i) ?? Pe, M = k.current;
+      S(X, {
+        direction: b ? 1 : -1,
+        event: i.nativeEvent,
+        reason: Q
+      });
+      const N = Y.current ?? k.current;
+      N !== M && c(N, _e(Q, i.nativeEvent));
+    },
+    onPointerDown(i) {
+      const I = !i.button || i.button === 0, X = t || (b ? v : z);
+      i.defaultPrevented || O || !I || X || (j.current = i.pointerType, H.current = !1, R.current = !0, W.current = {
+        x: i.clientX,
+        y: i.clientY
+      }, U(i.nativeEvent), i.pointerType !== "touch" ? (i.preventDefault(), p.current?.focus(), V(b, i)) : _.start(vn, () => {
+        const M = w.current;
+        w.current = 0, R.current && M != null && M < Tn ? (V(b, i), H.current = !0) : (H.current = !1, g());
+      }));
+    },
+    onPointerUp(i) {
+      i.pointerType === "touch" && (R.current = !1);
+    },
+    onPointerMove(i) {
+      if (t || O || (b ? v : z) || i.pointerType !== "touch" || !R.current)
+        return;
+      w.current != null && (w.current += 1);
+      const {
+        x: X,
+        y: M
+      } = W.current, N = X - i.clientX, y = M - i.clientY;
+      N ** 2 + y ** 2 > Pn ** 2 && g();
+    },
+    onMouseEnter(i) {
+      const I = t || O || (b ? v : z);
+      i.defaultPrevented || I || !R.current || x.current || j.current === "touch" || V(b, i);
+    },
+    onMouseLeave() {
+      x.current || g();
+    },
+    onMouseUp() {
+      x.current || g();
+    }
+  };
+}
+const Tt = /* @__PURE__ */ o.forwardRef(function(r, t) {
+  const {
+    render: s,
+    className: a,
+    disabled: f = !1,
+    nativeButton: S = !0,
+    ...p
+  } = r, {
+    allowInputSyncRef: m,
+    disabled: _,
+    formatOptionsRef: b,
+    getStepAmount: R,
+    id: K,
+    incrementValue: G,
+    inputRef: h,
+    inputValue: w,
+    intentionalTouchCheckTimeout: O,
+    isPressedRef: q,
+    locale: V,
+    maxWithDefault: g,
+    minWithDefault: d,
+    movesAfterTouchRef: k,
+    readOnly: Y,
+    setValue: c,
+    startAutoChange: W,
+    state: x,
+    stopAutoChange: H,
+    value: j,
+    valueRef: z,
+    lastChangedValueRef: v,
+    onValueCommitted: Q
+  } = De(), U = f || _, ee = vt({
+    isIncrement: !0,
+    inputRef: h,
+    startAutoChange: W,
+    stopAutoChange: H,
+    minWithDefault: d,
+    maxWithDefault: g,
+    value: j,
+    inputValue: w,
+    disabled: U,
+    readOnly: Y,
+    id: K,
+    setValue: c,
+    getStepAmount: R,
+    incrementValue: G,
+    allowInputSyncRef: m,
+    formatOptionsRef: b,
+    valueRef: z,
+    isPressedRef: q,
+    intentionalTouchCheckTimeout: O,
+    movesAfterTouchRef: k,
+    locale: V,
+    lastChangedValueRef: v,
+    onValueCommitted: Q
+  }), {
+    getButtonProps: i,
+    buttonRef: I
+  } = mt({
+    disabled: U,
+    native: S
+  }), X = o.useMemo(() => ({
+    ...x,
+    disabled: U
+  }), [x, U]);
+  return xe("button", r, {
+    ref: [t, I],
+    state: X,
+    props: [ee, p, i],
+    stateAttributesMapping: ye
+  });
+});
+process.env.NODE_ENV !== "production" && (Tt.displayName = "NumberFieldIncrement");
+const Pt = /* @__PURE__ */ o.forwardRef(function(r, t) {
+  const {
+    render: s,
+    className: a,
+    disabled: f = !1,
+    nativeButton: S = !0,
+    ...p
+  } = r, {
+    allowInputSyncRef: m,
+    disabled: _,
+    formatOptionsRef: b,
+    getStepAmount: R,
+    id: K,
+    incrementValue: G,
+    inputRef: h,
+    inputValue: w,
+    intentionalTouchCheckTimeout: O,
+    isPressedRef: q,
+    maxWithDefault: V,
+    minWithDefault: g,
+    movesAfterTouchRef: d,
+    readOnly: k,
+    setValue: Y,
+    startAutoChange: c,
+    state: W,
+    stopAutoChange: x,
+    value: H,
+    valueRef: j,
+    locale: z,
+    lastChangedValueRef: v,
+    onValueCommitted: Q
+  } = De(), U = f || _, ee = vt({
+    isIncrement: !1,
+    inputRef: h,
+    startAutoChange: c,
+    stopAutoChange: x,
+    minWithDefault: g,
+    maxWithDefault: V,
+    value: H,
+    inputValue: w,
+    disabled: U,
+    readOnly: k,
+    id: K,
+    setValue: Y,
+    getStepAmount: R,
+    incrementValue: G,
+    allowInputSyncRef: m,
+    formatOptionsRef: b,
+    valueRef: j,
+    isPressedRef: q,
+    intentionalTouchCheckTimeout: O,
+    movesAfterTouchRef: d,
+    locale: z,
+    lastChangedValueRef: v,
+    onValueCommitted: Q
+  }), {
+    getButtonProps: i,
+    buttonRef: I
+  } = mt({
+    disabled: U,
+    native: S
+  }), X = o.useMemo(() => ({
+    ...W,
+    disabled: U
+  }), [W, U]);
+  return xe("button", r, {
+    ref: [t, I],
+    state: X,
+    props: [ee, p, i],
+    stateAttributesMapping: ye
+  });
+});
+process.env.NODE_ENV !== "production" && (Pt.displayName = "NumberFieldDecrement");
+const Ln = {
+  ...nn,
+  ...ye
+}, On = /* @__PURE__ */ new Set(["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Escape"]), Dt = /* @__PURE__ */ o.forwardRef(function(r, t) {
+  const {
+    render: s,
+    className: a,
+    ...f
+  } = r, {
+    allowInputSyncRef: S,
+    disabled: p,
+    formatOptionsRef: m,
+    getAllowedNonNumericKeys: _,
+    getStepAmount: b,
+    id: R,
+    incrementValue: K,
+    inputMode: G,
+    inputValue: h,
+    max: w,
+    min: O,
+    name: q,
+    readOnly: V,
+    required: g,
+    setValue: d,
+    state: k,
+    setInputValue: Y,
+    locale: c,
+    inputRef: W,
+    value: x,
+    onValueCommitted: H,
+    lastChangedValueRef: j,
+    hasPendingCommitRef: z,
+    valueRef: v
+  } = De(), {
+    clearErrors: Q
+  } = Qt(), {
+    validationMode: U,
+    setTouched: ee,
+    setFocused: i,
+    invalid: I,
+    shouldValidateOnChange: X,
+    validation: M
+  } = ft(), {
+    labelId: N
+  } = en(), y = o.useRef(!1), L = o.useRef(!1);
+  return tn({
+    id: R,
+    commit: M.commit,
+    value: x,
+    controlRef: W,
+    name: q,
+    getValue: () => x ?? null
+  }), an(x, (e) => {
+    const u = X();
+    if (Q(q), u && M.commit(x), !(e === x || u)) {
+      if (L.current) {
+        L.current = !1;
+        return;
+      }
+      M.commit(x, !0);
+    }
+  }), xe("input", r, {
+    ref: [t, W],
+    state: k,
+    props: [{
+      id: R,
+      required: g,
+      disabled: p,
+      readOnly: V,
+      inputMode: G,
+      value: h,
+      type: "text",
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      "aria-roledescription": "Number field",
+      "aria-invalid": I || void 0,
+      "aria-labelledby": N,
+      // If the server's locale does not match the client's locale, the formatting may not match,
+      // causing a hydration mismatch.
+      suppressHydrationWarning: !0,
+      onFocus(e) {
+        if (e.defaultPrevented || V || p || y.current)
+          return;
+        y.current = !0, i(!0);
+        const u = e.currentTarget, T = u.value.length;
+        u.setSelectionRange(T, T);
+      },
+      onBlur(e) {
+        if (e.defaultPrevented || V || p)
+          return;
+        ee(!0), i(!1);
+        const u = !S.current, T = z.current;
+        if (S.current = !0, h.trim() === "") {
+          d(null, ce(Be, e.nativeEvent)), U === "onBlur" && M.commit(null), H(null, _e(Be, e.nativeEvent));
+          return;
+        }
+        const P = m.current, J = Se(h, c, P);
+        if (J === null)
+          return;
+        const l = P?.maximumFractionDigits != null || P?.minimumFractionDigits != null, oe = P?.maximumFractionDigits, te = l && typeof oe == "number" ? Number(J.toFixed(oe)) : J, ie = _e(st, e.nativeEvent), re = x !== te, ue = u || re || T;
+        U === "onBlur" && M.commit(te), re && (L.current = !0, d(te, ce(st, e.nativeEvent))), ue && H(te, ie);
+        const fe = Te(te, c, P), ge = dt(J, c, P);
+        !(!l && J === x && h === ge) && h !== fe && Y(fe);
+      },
+      onChange(e) {
+        if (e.nativeEvent.defaultPrevented)
+          return;
+        S.current = !1;
+        const u = e.target.value;
+        if (u.trim() === "") {
+          Y(u), d(null, ce(Be, e.nativeEvent));
+          return;
+        }
+        const T = _();
+        if (!Array.from(u).every((l) => {
+          const oe = l >= "0" && l <= "9", te = je.test(l), ie = ze.test(l), re = Nt.test(l), ue = at.test(l), fe = ve.test(l);
+          return oe || te || ie || re || ue || fe || T.has(l);
+        }))
+          return;
+        if (e.isTrusted) {
+          Y(u);
+          const l = Se(u, c, m.current);
+          l !== null && d(l, ce(rt, e.nativeEvent));
+          return;
+        }
+        const J = Se(u, c, m.current);
+        J !== null && (Y(u), d(J, ce(rt, e.nativeEvent)));
+      },
+      onKeyDown(e) {
+        if (e.defaultPrevented || V || p)
+          return;
+        const u = e.nativeEvent;
+        S.current = !0;
+        const T = _();
+        let P = T.has(e.key);
+        const {
+          decimal: J,
+          currency: l,
+          percentSign: oe
+        } = Je(c, m.current), te = e.currentTarget.selectionStart, ie = e.currentTarget.selectionEnd, re = te === 0 && ie === h.length, ue = (D) => te != null && ie != null && D >= te && D < ie;
+        if (ve.test(e.key) && Array.from(T).some((D) => ve.test(D || ""))) {
+          const D = h.search(yt), le = D != null && D !== -1 && ue(D);
+          P = !(ve.test(h) || Oe.test(h)) || re || le;
+        }
+        if (Oe.test(e.key) && Array.from(T).some((D) => Oe.test(D || ""))) {
+          const D = h.search(Ct), le = D != null && D !== -1 && ue(D);
+          P = !(ve.test(h) || Oe.test(h)) || re || le;
+        }
+        [J, l, oe].forEach((D) => {
+          if (e.key === D) {
+            const le = h.indexOf(D), we = ue(le);
+            P = !h.includes(D) || re || we;
+          }
+        });
+        const fe = e.key >= "0" && e.key <= "9", ge = je.test(e.key), he = ze.test(e.key), Ve = at.test(e.key), Fe = On.has(e.key);
+        if (
+          // Allow composition events (e.g., pinyin)
+          // event.nativeEvent.isComposing does not work in Safari:
+          // https://bugs.webkit.org/show_bug.cgi?id=165004
+          e.which === 229 || e.altKey || e.ctrlKey || e.metaKey || P || fe || ge || Ve || he || Fe
+        )
+          return;
+        const me = Se(h, c, m.current), Ee = b(e) ?? Pe;
+        cn(e);
+        const pe = _e(Ae, u);
+        e.key === "ArrowUp" ? (K(Ee, {
+          direction: 1,
+          currentValue: me,
+          event: u,
+          reason: Ae
+        }), H(j.current ?? v.current, pe)) : e.key === "ArrowDown" ? (K(Ee, {
+          direction: -1,
+          currentValue: me,
+          event: u,
+          reason: Ae
+        }), H(j.current ?? v.current, pe)) : e.key === "Home" && O != null ? (d(O, ce(Ae, u)), H(j.current ?? v.current, pe)) : e.key === "End" && w != null && (d(w, ce(Ae, u)), H(j.current ?? v.current, pe));
+      },
+      onPaste(e) {
+        if (e.defaultPrevented || V || p)
+          return;
+        e.preventDefault();
+        const T = (e.clipboardData || window.Clipboard).getData("text/plain"), P = Se(T, c, m.current);
+        P !== null && (S.current = !1, d(P, ce(un, e.nativeEvent)), Y(T));
+      }
+    }, M.getValidationProps(), f],
+    stateAttributesMapping: Ln
+  });
+});
+process.env.NODE_ENV !== "production" && (Dt.displayName = "NumberFieldInput");
+const Vt = /* @__PURE__ */ o.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Vt.displayName = "NumberFieldScrubAreaContext");
+function Un(n, r) {
+  const t = We(r), s = r.getBoundingClientRect();
+  if (s && n != null)
+    return {
+      x: s.left - n / 2,
+      y: s.top - n / 2,
+      width: s.right + n / 2,
+      height: s.bottom + n / 2
+    };
+  const a = t.visualViewport;
+  return a ? {
+    x: a.offsetLeft,
+    y: a.offsetTop,
+    width: a.offsetLeft + a.width,
+    height: a.offsetTop + a.height
+  } : {
+    x: 0,
+    y: 0,
+    width: t.document.documentElement.clientWidth,
+    height: t.document.documentElement.clientHeight
+  };
+}
+function kn(n, r) {
+  const t = We(n).visualViewport;
+  if (!t)
+    return () => {
+    };
+  function s() {
+    t && (r.current = t.scale);
+  }
+  return s(), t.addEventListener("resize", s), () => {
+    t.removeEventListener("resize", s);
+  };
+}
+const Ft = /* @__PURE__ */ o.forwardRef(function(r, t) {
+  const {
+    render: s,
+    className: a,
+    direction: f = "horizontal",
+    pixelSensitivity: S = 2,
+    teleportDistance: p,
+    ...m
+  } = r, {
+    state: _,
+    setIsScrubbing: b,
+    disabled: R,
+    readOnly: K,
+    inputRef: G,
+    incrementValue: h,
+    getStepAmount: w,
+    onValueCommitted: O,
+    lastChangedValueRef: q,
+    valueRef: V
+  } = De(), g = o.useRef(null), d = o.useRef(!1), k = o.useRef(null), Y = o.useRef({
+    x: 0,
+    y: 0
+  }), c = o.useRef(1), W = Ke(), [x, H] = o.useState(!1), [j, z] = o.useState(!1), [v, Q] = o.useState(!1);
+  o.useEffect(() => {
+    if (!(!v || !k.current))
+      return kn(k.current, c);
+  }, [v]);
+  function U(N, y) {
+    k.current && (k.current.style.transform = `translate3d(${N}px,${y}px,0) scale(${1 / c.current})`);
+  }
+  const ee = de(({
+    movementX: N,
+    movementY: y
+  }) => {
+    const L = k.current, Z = g.current;
+    if (!L || !Z)
+      return;
+    const A = Un(p, Z), e = Y.current, u = {
+      x: Math.round(e.x + N),
+      y: Math.round(e.y + y)
+    }, T = L.offsetWidth, P = L.offsetHeight;
+    u.x + T / 2 < A.x ? u.x = A.width - T / 2 : u.x + T / 2 > A.width && (u.x = A.x - T / 2), u.y + P / 2 < A.y ? u.y = A.height - P / 2 : u.y + P / 2 > A.height && (u.y = A.y - P / 2), Y.current = u, U(u.x, u.y);
+  }), i = de((N, {
+    clientX: y,
+    clientY: L
+  }) => {
+    it.flushSync(() => {
+      Q(N), b(N);
+    });
+    const Z = k.current;
+    if (!Z || !N)
+      return;
+    const A = {
+      x: y - Z.offsetWidth / 2,
+      y: L - Z.offsetHeight / 2
+    };
+    Y.current = A, U(A.x, A.y);
+  });
+  o.useEffect(function() {
+    if (!G.current || R || K || !v)
+      return;
+    let y = 0;
+    function L(e) {
+      function u() {
+        try {
+          Ye(g.current).exitPointerLock();
+        } catch {
+        } finally {
+          d.current = !1, i(!1, e), O(q.current ?? V.current, _e(ot, e));
+        }
+      }
+      qt ? W.start(20, u) : u();
+    }
+    function Z(e) {
+      if (!d.current)
+        return;
+      e.preventDefault(), ee(e);
+      const {
+        movementX: u,
+        movementY: T
+      } = e;
+      if (y += f === "vertical" ? T : u, Math.abs(y) >= S) {
+        y = 0;
+        const P = f === "vertical" ? -T : u, J = w(e) ?? Pe, l = P * J;
+        l !== 0 && h(Math.abs(l), {
+          direction: l >= 0 ? 1 : -1,
+          event: e,
+          reason: ot
+        });
+      }
+    }
+    const A = We(G.current);
+    return A.addEventListener("pointerup", L, !0), A.addEventListener("pointermove", Z, !0), () => {
+      W.clear(), A.removeEventListener("pointerup", L, !0), A.removeEventListener("pointermove", Z, !0);
+    };
+  }, [R, K, h, v, w, G, i, ee, f, S, q, O, V, W]), o.useEffect(function() {
+    const y = g.current;
+    if (!y || R || K)
+      return;
+    function L(Z) {
+      Z.touches.length === 1 && Z.preventDefault();
+    }
+    return y.addEventListener("touchstart", L), () => {
+      y.removeEventListener("touchstart", L);
+    };
+  }, [R, K]);
+  const X = xe("span", r, {
+    ref: [t, g],
+    state: _,
+    props: [{
+      role: "presentation",
+      style: {
+        touchAction: "none",
+        WebkitUserSelect: "none",
+        userSelect: "none"
+      },
+      async onPointerDown(N) {
+        const y = !N.button || N.button === 0;
+        if (N.defaultPrevented || K || !y || R)
+          return;
+        const L = N.pointerType === "touch";
+        if (H(L), N.pointerType === "mouse" && (N.preventDefault(), G.current?.focus()), d.current = !0, i(!0, N.nativeEvent), !L && !Zt)
+          try {
+            await Ye(g.current).body.requestPointerLock(), z(!1);
+          } catch {
+            z(!0);
+          } finally {
+            d.current && it.flushSync(() => {
+              i(!0, N.nativeEvent);
+            });
+          }
+      }
+    }, m],
+    stateAttributesMapping: ye
+  }), M = o.useMemo(() => ({
+    isScrubbing: v,
+    isTouchInput: x,
+    isPointerLockDenied: j,
+    scrubAreaCursorRef: k,
+    scrubAreaRef: g,
+    direction: f,
+    pixelSensitivity: S,
+    teleportDistance: p
+  }), [v, x, j, f, S, p]);
+  return /* @__PURE__ */ se(Vt.Provider, {
+    value: M,
+    children: X
+  });
+});
+process.env.NODE_ENV !== "production" && (Ft.displayName = "NumberFieldScrubArea");
+const Ne = {
+  "number-input__root": "_number-input__root_l4882_2",
+  "number-input": "_number-input_l4882_2",
+  "number-input__scrub-area": "_number-input__scrub-area_l4882_20",
+  "number-input__group": "_number-input__group_l4882_25",
+  "number-input__controls": "_number-input__controls_l4882_29",
+  "number-input__separator": "_number-input__separator_l4882_40"
+};
+function pr({
+  label: n,
+  /** Apply className to NumberField.Input */
+  className: r,
+  /** Apply style to NumberField.Input */
+  style: t,
+  ...s
+}) {
+  const a = Ut(), f = s.id || a;
+  return /* @__PURE__ */ Ue(
+    It,
+    {
+      ...s,
+      id: f,
+      className: Ne["number-input__root"],
+      children: [
+        n ? /* @__PURE__ */ se(Ft, { className: Ne["number-input__scrub-area"], children: /* @__PURE__ */ se("label", { htmlFor: f, children: /* @__PURE__ */ se(kt, { color: "dimmer", children: n }) }) }) : null,
+        /* @__PURE__ */ Ue(At, { className: Ne["number-input__group"], children: [
+          /* @__PURE__ */ se(
+            Wt,
+            {
+              render: /* @__PURE__ */ se(
+                Dt,
+                {
+                  className: Ot(Ne["number-input"], r),
+                  style: t
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ Ue(Ht, { className: Ne["number-input__controls"], children: [
+            /* @__PURE__ */ se(
+              tt,
+              {
+                size: "sm",
+                alt: "Decrement",
+                icon: "subtract-line",
+                render: /* @__PURE__ */ se(Pt, {})
+              }
+            ),
+            /* @__PURE__ */ se(
+              Gt,
+              {
+                orientation: "vertical",
+                className: Ne["number-input__separator"]
+              }
+            ),
+            /* @__PURE__ */ se(
+              tt,
+              {
+                size: "sm",
+                alt: "Increment",
+                icon: "add-line",
+                render: /* @__PURE__ */ se(Tt, {})
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  pr as NumberInput
+};