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

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

@@ -1,48 +1,212 @@
-import * as l from "react";
-import { FOCUSABLE_ATTRIBUTE as C, ACTIVE_KEY as s, SELECTED_KEY as E } from "./als-react-ts-ui310.js";
-function k(e = []) {
-  const a = e.map((n) => n?.reference), g = e.map((n) => n?.floating), f = e.map((n) => n?.item), t = e.map((n) => n?.trigger), o = l.useCallback(
-    (n) => u(n, e, "reference"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    a
-  ), c = l.useCallback(
-    (n) => u(n, e, "floating"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    g
-  ), i = l.useCallback(
-    (n) => u(n, e, "item"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    f
-  ), r = l.useCallback(
-    (n) => u(n, e, "trigger"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    t
-  );
-  return l.useMemo(() => ({
-    getReferenceProps: o,
-    getFloatingProps: c,
-    getItemProps: i,
-    getTriggerProps: r
-  }), [o, c, i, r]);
-}
-function u(e, a, g) {
-  const f = /* @__PURE__ */ new Map(), t = g === "item", o = {};
-  g === "floating" && (o.tabIndex = -1, o[C] = "");
-  for (const c in e)
-    t && e && (c === s || c === E) || (o[c] = e[c]);
-  for (let c = 0; c < a.length; c += 1) {
-    let i;
-    const r = a[c]?.[g];
-    typeof r == "function" ? i = e ? r(e) : null : i = r, i && m(o, i, t, f);
-  }
-  return m(o, e, t, f), o;
-}
-function m(e, a, g, f) {
-  for (const t in a) {
-    const o = a[t];
-    g && (t === s || t === E) || (t.startsWith("on") ? (f.has(t) || f.set(t, []), typeof o == "function" && (f.get(t)?.push(o), e[t] = (...c) => f.get(t)?.map((i) => i(...c)).find((i) => i !== void 0))) : e[t] = o);
-  }
-}
+import * as v from "react";
+import { useNumberFieldRootContext as he } from "./als-react-ts-ui490.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-ui493.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-ui492.js";
+import { stateAttributesMapping as Fe } from "./als-react-ts-ui491.js";
+import { useRenderElement as Ie } from "./als-react-ts-ui226.js";
+import { createChangeEventDetails as f, createGenericEventDetails as M } from "./als-react-ts-ui229.js";
+import { formatNumber as ke, formatNumberMaxPrecision as we } from "./als-react-ts-ui484.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-ui231.js";
+import { stopEvent as Me } from "./als-react-ts-ui280.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 {
-  k as useInteractions
+  Ue as NumberFieldInput
 };

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

@@ -1,7 +1,82 @@
-import { CommonPopupDataAttributes as d } from "./als-react-ts-ui188.js";
-let y = (function(n) {
-  return n[n.open = d.open] = "open", n[n.closed = d.closed] = "closed", n[n.startingStyle = d.startingStyle] = "startingStyle", n[n.endingStyle = d.endingStyle] = "endingStyle", n.nested = "data-nested", n.nestedDialogOpen = "data-nested-dialog-open", n;
-})({});
+import * as n from "react";
+import { useRenderElement as T } from "./als-react-ts-ui226.js";
+import { useNumberFieldRootContext as w } from "./als-react-ts-ui490.js";
+import { useNumberFieldButton as M } from "./als-react-ts-ui495.js";
+import { stateAttributesMapping as W } from "./als-react-ts-ui491.js";
+import { useButton as k } from "./als-react-ts-ui230.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 {
-  y as DialogViewportDataAttributes
+  _ as NumberFieldIncrement
 };

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

@@ -1,21 +1,82 @@
-import { forwardRef as m, createElement as l } from "react";
-import { mergeClasses as d, toKebabCase as f, toPascalCase as r } from "./als-react-ts-ui204.js";
-import n from "./als-react-ts-ui205.js";
-const C = (e, t) => {
-  const o = m(
-    ({ className: a, ...s }, c) => l(n, {
-      ref: c,
-      iconNode: t,
-      className: d(
-        `lucide-${f(r(e))}`,
-        `lucide-${e}`,
-        a
-      ),
-      ...s
-    })
-  );
-  return o.displayName = r(e), o;
-};
+import * as n from "react";
+import { useRenderElement as w } from "./als-react-ts-ui226.js";
+import { useNumberFieldRootContext as I } from "./als-react-ts-ui490.js";
+import { useNumberFieldButton as M } from "./als-react-ts-ui495.js";
+import { stateAttributesMapping as W } from "./als-react-ts-ui491.js";
+import { useButton as k } from "./als-react-ts-ui230.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 {
-  C as default
+  _ as NumberFieldDecrement
 };

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

@@ -1,18 +1,170 @@
-const s = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), a = (t) => t.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (e, o, r) => r ? r.toUpperCase() : o.toLowerCase()
-), n = (t) => {
-  const e = a(t);
-  return e.charAt(0).toUpperCase() + e.slice(1);
-}, c = (...t) => t.filter((e, o, r) => !!e && e.trim() !== "" && r.indexOf(e) === o).join(" ").trim(), i = (t) => {
-  for (const e in t)
-    if (e.startsWith("aria-") || e === "role" || e === "title")
-      return !0;
-};
+import * as s from "react";
+import * as F from "react-dom";
+import { ownerDocument as W } from "./als-react-ts-ui352.js";
+import { isWebKit as Y } from "./als-react-ts-ui351.js";
+import { useValueAsRef as J } from "./als-react-ts-ui318.js";
+import { useStableCallback as I } from "./als-react-ts-ui266.js";
+import { useNumberFieldRootContext as H } from "./als-react-ts-ui490.js";
+import { stateAttributesMapping as Q } from "./als-react-ts-ui491.js";
+import { NumberFieldScrubAreaContext as Z } from "./als-react-ts-ui496.js";
+import { useRenderElement as ee } from "./als-react-ts-ui226.js";
+import { getViewportRect as te } from "./als-react-ts-ui497.js";
+import { subscribeToVisualViewportResize as re } from "./als-react-ts-ui498.js";
+import { DEFAULT_STEP as ne } from "./als-react-ts-ui493.js";
+import { createGenericEventDetails as oe } from "./als-react-ts-ui229.js";
+import { jsx as ue } from "react/jsx-runtime";
+import { getWindow as se } from "./als-react-ts-ui320.js";
+import { scrub as O } from "./als-react-ts-ui231.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 {
-  i as hasA11yProp,
-  c as mergeClasses,
-  a as toCamelCase,
-  s as toKebabCase,
-  n as toPascalCase
+  ie as NumberFieldScrubArea
 };