@als-tp/als-react-ts-ui 0.4.0 → 0.5.0

package/dist/als-react-ts-ui224.js

@@ -1,6 +1,212 @@
-let e = /* @__PURE__ */ (function(a) {
-  return a.disabled = "data-disabled", a.orientation = "data-orientation", a;
-})({});
+import * as v from "react";
+import { useNumberFieldRootContext as he } from "./als-react-ts-ui498.js";
+import { useFieldRootContext as Re } from "./als-react-ts-ui398.js";
+import { fieldValidityMapping as Ae } from "./als-react-ts-ui409.js";
+import { useField as Ce } from "./als-react-ts-ui403.js";
+import { useFormContext as be } from "./als-react-ts-ui402.js";
+import { useLabelableContext as De } from "./als-react-ts-ui399.js";
+import { DEFAULT_STEP as xe } from "./als-react-ts-ui501.js";
+import { parseNumber as T, getNumberLocaleDetails as Te, ANY_MINUS_DETECT_RE as P, ANY_MINUS_RE as Pe, ANY_PLUS_DETECT_RE as k, ANY_PLUS_RE as Ve, ARABIC_DETECT_RE as X, HAN_DETECT_RE as Z, FULLWIDTH_DETECT_RE as ee, PERSIAN_DETECT_RE as _e } from "./als-react-ts-ui500.js";
+import { stateAttributesMapping as Fe } from "./als-react-ts-ui499.js";
+import { useRenderElement as Ie } from "./als-react-ts-ui189.js";
+import { createChangeEventDetails as f, createGenericEventDetails as M } from "./als-react-ts-ui246.js";
+import { formatNumber as ke, formatNumberMaxPrecision as we } from "./als-react-ts-ui494.js";
+import { useValueChanged as Se } from "./als-react-ts-ui406.js";
+import { inputPaste as ve, keyboard as V, inputClear as K, inputChange as te, inputBlur as re } from "./als-react-ts-ui248.js";
+import { stopEvent as Me } from "./als-react-ts-ui295.js";
+const Ke = {
+  ...Ae,
+  ...Fe
+}, Le = /* @__PURE__ */ new Set(["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Escape"]), Ue = /* @__PURE__ */ v.forwardRef(function(L, ne) {
+  const {
+    render: Oe,
+    className: Be,
+    ...ie
+  } = L, {
+    allowInputSyncRef: C,
+    disabled: b,
+    formatOptionsRef: g,
+    getAllowedNonNumericKeys: U,
+    getStepAmount: ae,
+    id: H,
+    incrementValue: O,
+    inputMode: oe,
+    inputValue: i,
+    max: B,
+    min: Y,
+    name: G,
+    readOnly: D,
+    required: se,
+    setValue: u,
+    state: le,
+    setInputValue: x,
+    locale: c,
+    inputRef: W,
+    value: m,
+    onValueCommitted: N,
+    lastChangedValueRef: _,
+    hasPendingCommitRef: ue,
+    valueRef: F
+  } = he(), {
+    clearErrors: ce
+  } = be(), {
+    validationMode: q,
+    setTouched: me,
+    setFocused: $,
+    invalid: de,
+    shouldValidateOnChange: fe,
+    validation: p
+  } = Re(), {
+    labelId: pe
+  } = De(), j = v.useRef(!1), w = v.useRef(!1);
+  Ce({
+    id: H,
+    commit: p.commit,
+    value: m,
+    controlRef: W,
+    name: G,
+    getValue: () => m ?? null
+  }), Se(m, (e) => {
+    const t = fe();
+    if (ce(G), t && p.commit(m), !(e === m || t)) {
+      if (w.current) {
+        w.current = !1;
+        return;
+      }
+      p.commit(m, !0);
+    }
+  });
+  const Ee = {
+    id: H,
+    required: se,
+    disabled: b,
+    readOnly: D,
+    inputMode: oe,
+    value: i,
+    type: "text",
+    autoComplete: "off",
+    autoCorrect: "off",
+    spellCheck: "false",
+    "aria-roledescription": "Number field",
+    "aria-invalid": de || void 0,
+    "aria-labelledby": pe,
+    // 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 || D || b || j.current)
+        return;
+      j.current = !0, $(!0);
+      const t = e.currentTarget, o = t.value.length;
+      t.setSelectionRange(o, o);
+    },
+    onBlur(e) {
+      if (e.defaultPrevented || D || b)
+        return;
+      me(!0), $(!1);
+      const t = !C.current, o = ue.current;
+      if (C.current = !0, i.trim() === "") {
+        u(null, f(K, e.nativeEvent)), q === "onBlur" && p.commit(null), N(null, M(K, e.nativeEvent));
+        return;
+      }
+      const a = g.current, l = T(i, c, a);
+      if (l === null)
+        return;
+      w.current = !0;
+      const n = a?.maximumFractionDigits != null || a?.minimumFractionDigits != null, y = a?.maximumFractionDigits, s = n && typeof y == "number" ? Number(l.toFixed(y)) : l, E = M(re, e.nativeEvent), d = m !== s, h = t || d || o;
+      q === "onBlur" && p.commit(s), d && u(s, f(re, e.nativeEvent)), h && N(s, E);
+      const R = ke(s, c, a), S = we(l, c, a);
+      !(!n && l === m && i === S) && i !== R && x(R);
+    },
+    onChange(e) {
+      if (e.nativeEvent.defaultPrevented)
+        return;
+      C.current = !1;
+      const t = e.target.value;
+      if (t.trim() === "") {
+        x(t), u(null, f(K, e.nativeEvent));
+        return;
+      }
+      const o = U();
+      if (!Array.from(t).every((n) => {
+        const y = n >= "0" && n <= "9", s = X.test(n), E = Z.test(n), d = _e.test(n), h = ee.test(n), R = P.test(n);
+        return y || s || E || d || h || R || o.has(n);
+      }))
+        return;
+      if (e.isTrusted) {
+        x(t);
+        const n = T(t, c, g.current);
+        n !== null && u(n, f(te, e.nativeEvent));
+        return;
+      }
+      const l = T(t, c, g.current);
+      l !== null && (x(t), u(l, f(te, e.nativeEvent)));
+    },
+    onKeyDown(e) {
+      if (e.defaultPrevented || D || b)
+        return;
+      const t = e.nativeEvent;
+      C.current = !0;
+      const o = U();
+      let a = o.has(e.key);
+      const {
+        decimal: l,
+        currency: n,
+        percentSign: y
+      } = Te(c, g.current), s = e.currentTarget.selectionStart, E = e.currentTarget.selectionEnd, d = s === 0 && E === i.length, h = (r) => s === r && E === r + 1;
+      if (P.test(e.key) && Array.from(o).some((r) => P.test(r || ""))) {
+        const r = i.search(Pe), A = r != null && r !== -1 && h(r);
+        a = !(P.test(i) || k.test(i)) || d || A;
+      }
+      if (k.test(e.key) && Array.from(o).some((r) => k.test(r || ""))) {
+        const r = i.search(Ve), A = r != null && r !== -1 && h(r);
+        a = !(P.test(i) || k.test(i)) || d || A;
+      }
+      [l, n, y].forEach((r) => {
+        if (e.key === r) {
+          const A = i.indexOf(r), ye = s === A && E === A + 1;
+          a = !i.includes(r) || d || ye;
+        }
+      });
+      const R = e.key >= "0" && e.key <= "9", S = X.test(e.key), z = Z.test(e.key), ge = ee.test(e.key), Ne = Le.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 || a || R || S || ge || z || Ne
+      )
+        return;
+      const J = T(i, c, g.current), Q = ae(e) ?? xe;
+      Me(e);
+      const I = M(V, t);
+      e.key === "ArrowUp" ? (O(Q, {
+        direction: 1,
+        currentValue: J,
+        event: t,
+        reason: V
+      }), N(_.current ?? F.current, I)) : e.key === "ArrowDown" ? (O(Q, {
+        direction: -1,
+        currentValue: J,
+        event: t,
+        reason: V
+      }), N(_.current ?? F.current, I)) : e.key === "Home" && Y != null ? (u(Y, f(V, t)), N(_.current ?? F.current, I)) : e.key === "End" && B != null && (u(B, f(V, t)), N(_.current ?? F.current, I));
+    },
+    onPaste(e) {
+      if (e.defaultPrevented || D || b)
+        return;
+      e.preventDefault();
+      const o = (e.clipboardData || window.Clipboard).getData("text/plain"), a = T(o, c, g.current);
+      a !== null && (C.current = !1, u(a, f(ve, e.nativeEvent)), x(o));
+    }
+  };
+  return Ie("input", L, {
+    ref: [ne, W, p.inputRef],
+    state: le,
+    props: [Ee, p.getInputValidationProps(), ie],
+    stateAttributesMapping: Ke
+  });
+});
+process.env.NODE_ENV !== "production" && (Ue.displayName = "NumberFieldInput");
 export {
-  e as AccordionRootDataAttributes
+  Ue as NumberFieldInput
 };

package/dist/als-react-ts-ui225.js

@@ -1,19 +1,82 @@
-import { useIsoLayoutEffect as r } from "./als-react-ts-ui161.js";
-import { useRefWithInit as n } from "./als-react-ts-ui184.js";
-function s(e) {
-  const t = n(f, e).current;
-  return t.next = e, r(t.effect), t;
-}
-function f(e) {
-  const t = {
-    current: e,
-    next: e,
-    effect: () => {
-      t.current = t.next;
-    }
-  };
-  return t;
-}
+import * as n from "react";
+import { useRenderElement as T } from "./als-react-ts-ui189.js";
+import { useNumberFieldRootContext as w } from "./als-react-ts-ui498.js";
+import { useNumberFieldButton as M } from "./als-react-ts-ui503.js";
+import { stateAttributesMapping as W } from "./als-react-ts-ui499.js";
+import { useButton as k } from "./als-react-ts-ui247.js";
+const _ = /* @__PURE__ */ n.forwardRef(function(t, r) {
+  const {
+    render: q,
+    className: z,
+    disabled: s = !1,
+    nativeButton: u = !0,
+    ...a
+  } = t, {
+    allowInputSyncRef: i,
+    disabled: m,
+    formatOptionsRef: l,
+    getStepAmount: d,
+    id: f,
+    incrementValue: c,
+    inputRef: p,
+    inputValue: b,
+    intentionalTouchCheckTimeout: R,
+    isPressedRef: N,
+    locale: h,
+    maxWithDefault: g,
+    minWithDefault: v,
+    movesAfterTouchRef: C,
+    readOnly: V,
+    setValue: A,
+    startAutoChange: F,
+    state: o,
+    stopAutoChange: I,
+    value: x,
+    valueRef: B,
+    lastChangedValueRef: D,
+    onValueCommitted: y
+  } = w(), e = s || m, E = M({
+    isIncrement: !0,
+    inputRef: p,
+    startAutoChange: F,
+    stopAutoChange: I,
+    minWithDefault: v,
+    maxWithDefault: g,
+    value: x,
+    inputValue: b,
+    disabled: e,
+    readOnly: V,
+    id: f,
+    setValue: A,
+    getStepAmount: d,
+    incrementValue: c,
+    allowInputSyncRef: i,
+    formatOptionsRef: l,
+    valueRef: B,
+    isPressedRef: N,
+    intentionalTouchCheckTimeout: R,
+    movesAfterTouchRef: C,
+    locale: h,
+    lastChangedValueRef: D,
+    onValueCommitted: y
+  }), {
+    getButtonProps: O,
+    buttonRef: P
+  } = k({
+    disabled: e,
+    native: u
+  }), S = n.useMemo(() => ({
+    ...o,
+    disabled: e
+  }), [o, e]);
+  return T("button", t, {
+    ref: [r, P],
+    state: S,
+    props: [E, a, O],
+    stateAttributesMapping: W
+  });
+});
+process.env.NODE_ENV !== "production" && (_.displayName = "NumberFieldIncrement");
 export {
-  s as useValueAsRef
+  _ as NumberFieldIncrement
 };

package/dist/als-react-ts-ui226.js

@@ -1,14 +1,82 @@
-import r from "./als-react-ts-ui197.js";
-import * as o from "react";
-const e = /* @__PURE__ */ o.createContext(void 0);
-process.env.NODE_ENV !== "production" && (e.displayName = "AvatarRootContext");
-function a() {
-  const t = o.useContext(e);
-  if (t === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AvatarRootContext is missing. Avatar parts must be placed within <Avatar.Root>." : r(13));
-  return t;
-}
+import * as n from "react";
+import { useRenderElement as w } from "./als-react-ts-ui189.js";
+import { useNumberFieldRootContext as I } from "./als-react-ts-ui498.js";
+import { useNumberFieldButton as M } from "./als-react-ts-ui503.js";
+import { stateAttributesMapping as W } from "./als-react-ts-ui499.js";
+import { useButton as k } from "./als-react-ts-ui247.js";
+const _ = /* @__PURE__ */ n.forwardRef(function(t, r) {
+  const {
+    render: q,
+    className: z,
+    disabled: s = !1,
+    nativeButton: a = !0,
+    ...u
+  } = t, {
+    allowInputSyncRef: i,
+    disabled: m,
+    formatOptionsRef: l,
+    getStepAmount: f,
+    id: d,
+    incrementValue: c,
+    inputRef: p,
+    inputValue: b,
+    intentionalTouchCheckTimeout: R,
+    isPressedRef: N,
+    maxWithDefault: h,
+    minWithDefault: D,
+    movesAfterTouchRef: g,
+    readOnly: v,
+    setValue: C,
+    startAutoChange: V,
+    state: o,
+    stopAutoChange: A,
+    value: F,
+    valueRef: x,
+    locale: B,
+    lastChangedValueRef: y,
+    onValueCommitted: E
+  } = I(), e = s || m, O = M({
+    isIncrement: !1,
+    inputRef: p,
+    startAutoChange: V,
+    stopAutoChange: A,
+    minWithDefault: D,
+    maxWithDefault: h,
+    value: F,
+    inputValue: b,
+    disabled: e,
+    readOnly: v,
+    id: d,
+    setValue: C,
+    getStepAmount: f,
+    incrementValue: c,
+    allowInputSyncRef: i,
+    formatOptionsRef: l,
+    valueRef: x,
+    isPressedRef: N,
+    intentionalTouchCheckTimeout: R,
+    movesAfterTouchRef: g,
+    locale: B,
+    lastChangedValueRef: y,
+    onValueCommitted: E
+  }), {
+    getButtonProps: P,
+    buttonRef: S
+  } = k({
+    disabled: e,
+    native: a
+  }), T = n.useMemo(() => ({
+    ...o,
+    disabled: e
+  }), [o, e]);
+  return w("button", t, {
+    ref: [r, S],
+    state: T,
+    props: [O, u, P],
+    stateAttributesMapping: W
+  });
+});
+process.env.NODE_ENV !== "production" && (_.displayName = "NumberFieldDecrement");
 export {
-  e as AvatarRootContext,
-  a as useAvatarRootContext
+  _ as NumberFieldDecrement
 };

package/dist/als-react-ts-ui227.js

@@ -1,6 +1,170 @@
-const t = {
-  imageLoadingStatus: () => null
-};
+import * as s from "react";
+import * as F from "react-dom";
+import { ownerDocument as W } from "./als-react-ts-ui372.js";
+import { isWebKit as Y } from "./als-react-ts-ui371.js";
+import { useValueAsRef as J } from "./als-react-ts-ui337.js";
+import { useStableCallback as I } from "./als-react-ts-ui192.js";
+import { useNumberFieldRootContext as H } from "./als-react-ts-ui498.js";
+import { stateAttributesMapping as Q } from "./als-react-ts-ui499.js";
+import { NumberFieldScrubAreaContext as Z } from "./als-react-ts-ui504.js";
+import { useRenderElement as ee } from "./als-react-ts-ui189.js";
+import { getViewportRect as te } from "./als-react-ts-ui505.js";
+import { subscribeToVisualViewportResize as re } from "./als-react-ts-ui506.js";
+import { DEFAULT_STEP as ne } from "./als-react-ts-ui501.js";
+import { createGenericEventDetails as oe } from "./als-react-ts-ui246.js";
+import { jsx as ue } from "react/jsx-runtime";
+import { getWindow as se } from "./als-react-ts-ui339.js";
+import { scrub as O } from "./als-react-ts-ui248.js";
+const ie = /* @__PURE__ */ s.forwardRef(function(g, U) {
+  const {
+    render: ae,
+    className: fe,
+    direction: d = "horizontal",
+    pixelSensitivity: h = 2,
+    teleportDistance: x,
+    ...$
+  } = g, {
+    state: z
+  } = H(), {
+    isScrubbing: f,
+    setIsScrubbing: G,
+    disabled: p,
+    readOnly: b,
+    value: _,
+    inputRef: y,
+    incrementValue: A,
+    getStepAmount: C,
+    onValueCommitted: D,
+    lastChangedValueRef: L,
+    valueRef: P
+  } = H(), j = J(_), l = s.useRef(null), v = s.useRef(!1), c = s.useRef(null), R = s.useRef({
+    x: 0,
+    y: 0
+  }), w = s.useRef(1), [T, q] = s.useState(!1), [V, M] = s.useState(!1);
+  s.useEffect(() => {
+    if (!(!f || !c.current))
+      return re(c.current, w);
+  }, [f]);
+  function N(e, r) {
+    c.current && (c.current.style.transform = `translate3d(${e}px,${r}px,0) scale(${1 / w.current})`);
+  }
+  const k = I(({
+    movementX: e,
+    movementY: r
+  }) => {
+    const n = c.current, u = l.current;
+    if (!n || !u)
+      return;
+    const t = te(x, u), i = R.current, o = {
+      x: Math.round(i.x + e),
+      y: Math.round(i.y + r)
+    }, a = n.offsetWidth, m = n.offsetHeight;
+    o.x + a / 2 < t.x ? o.x = t.width - a / 2 : o.x + a / 2 > t.width && (o.x = t.x - a / 2), o.y + m / 2 < t.y ? o.y = t.height - m / 2 : o.y + m / 2 > t.height && (o.y = t.y - m / 2), R.current = o, N(o.x, o.y);
+  }), S = I((e, {
+    clientX: r,
+    clientY: n
+  }) => {
+    F.flushSync(() => {
+      G(e);
+    });
+    const u = c.current;
+    if (!u || !e)
+      return;
+    const t = {
+      x: r - u.offsetWidth / 2,
+      y: n - u.offsetHeight / 2
+    };
+    R.current = t, N(t.x, t.y);
+  });
+  s.useEffect(function() {
+    if (!y.current || p || b || !f)
+      return;
+    let r = 0;
+    function n(i) {
+      try {
+        W(l.current).exitPointerLock();
+      } catch {
+      } finally {
+        v.current = !1, S(!1, i), D(L.current ?? P.current, oe(O, i));
+      }
+    }
+    function u(i) {
+      if (!v.current)
+        return;
+      i.preventDefault(), k(i);
+      const {
+        movementX: o,
+        movementY: a
+      } = i;
+      if (r += d === "vertical" ? a : o, Math.abs(r) >= h) {
+        r = 0;
+        const m = d === "vertical" ? -a : o, X = C(i) ?? ne, E = m * X;
+        E !== 0 && A(Math.abs(E), {
+          direction: E >= 0 ? 1 : -1,
+          event: i,
+          reason: O
+        });
+      }
+    }
+    const t = se(y.current);
+    return t.addEventListener("pointerup", n, !0), t.addEventListener("pointermove", u, !0), () => {
+      t.removeEventListener("pointerup", n, !0), t.removeEventListener("pointermove", u, !0);
+    };
+  }, [p, b, f, A, j, C, y, S, k, d, h, L, D, P]), s.useEffect(function() {
+    const r = l.current;
+    if (!r || p || b)
+      return;
+    function n(u) {
+      u.touches.length === 1 && u.preventDefault();
+    }
+    return r.addEventListener("touchstart", n), () => {
+      r.removeEventListener("touchstart", n);
+    };
+  }, [p, b]);
+  const B = ee("span", g, {
+    ref: [U, l],
+    state: z,
+    props: [{
+      role: "presentation",
+      style: {
+        touchAction: "none",
+        WebkitUserSelect: "none",
+        userSelect: "none"
+      },
+      async onPointerDown(e) {
+        const r = !e.button || e.button === 0;
+        if (e.defaultPrevented || b || !r || p)
+          return;
+        const n = e.pointerType === "touch";
+        if (q(n), e.pointerType === "mouse" && (e.preventDefault(), y.current?.focus()), v.current = !0, S(!0, e.nativeEvent), !n && !Y)
+          try {
+            await W(l.current).body.requestPointerLock(), M(!1);
+          } catch {
+            M(!0);
+          } finally {
+            v.current && F.flushSync(() => {
+              S(!0, e.nativeEvent);
+            });
+          }
+      }
+    }, $],
+    stateAttributesMapping: Q
+  }), K = s.useMemo(() => ({
+    isScrubbing: f,
+    isTouchInput: T,
+    isPointerLockDenied: V,
+    scrubAreaCursorRef: c,
+    scrubAreaRef: l,
+    direction: d,
+    pixelSensitivity: h,
+    teleportDistance: x
+  }), [f, T, V, d, h, x]);
+  return /* @__PURE__ */ ue(Z.Provider, {
+    value: K,
+    children: B
+  });
+});
+process.env.NODE_ENV !== "production" && (ie.displayName = "NumberFieldScrubArea");
 export {
-  t as avatarStateAttributesMapping
+  ie as NumberFieldScrubArea
 };

package/dist/als-react-ts-ui228.js

@@ -1,23 +1,41 @@
-import * as d from "react";
-import { useIsoLayoutEffect as f } from "./als-react-ts-ui161.js";
-import { NOOP as m } from "./als-react-ts-ui212.js";
-function p(o, {
-  referrerPolicy: e,
-  crossOrigin: a
-}) {
-  const [i, r] = d.useState("idle");
-  return f(() => {
-    if (!o)
-      return r("error"), m;
-    let n = !0;
-    const t = new window.Image(), u = (s) => () => {
-      n && r(s);
-    };
-    return r("loading"), t.onload = u("loaded"), t.onerror = u("error"), e && (t.referrerPolicy = e), t.crossOrigin = a ?? null, t.src = o, () => {
-      n = !1;
-    };
-  }, [o, a, e]), i;
-}
+import * as o from "react";
+import * as p from "react-dom";
+import { isWebKit as d } from "./als-react-ts-ui371.js";
+import { ownerDocument as b } from "./als-react-ts-ui372.js";
+import { useNumberFieldRootContext as f } from "./als-react-ts-ui498.js";
+import { stateAttributesMapping as N } from "./als-react-ts-ui499.js";
+import { useNumberFieldScrubAreaContext as R } from "./als-react-ts-ui504.js";
+import { useRenderElement as A } from "./als-react-ts-ui189.js";
+const C = /* @__PURE__ */ o.forwardRef(function(e, t) {
+  const {
+    render: S,
+    className: D,
+    ...s
+  } = e, {
+    state: n
+  } = f(), {
+    isScrubbing: i,
+    isTouchInput: m,
+    isPointerLockDenied: u,
+    scrubAreaCursorRef: a
+  } = R(), [c, l] = o.useState(null), r = A("span", e, {
+    enabled: i && !d && !m && !u,
+    ref: [t, a, l],
+    state: n,
+    props: [{
+      role: "presentation",
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        pointerEvents: "none"
+      }
+    }, s],
+    stateAttributesMapping: N
+  });
+  return r && /* @__PURE__ */ p.createPortal(r, b(c).body);
+});
+process.env.NODE_ENV !== "production" && (C.displayName = "NumberFieldScrubAreaCursor");
 export {
-  p as useImageLoadingStatus
+  C as NumberFieldScrubAreaCursor
 };