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

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

@@ -1,50 +1,82 @@
-import * as m from "react";
-import { MeterRootContext as b } from "./als-react-ts-ui493.js";
-import { formatNumber as c } from "./als-react-ts-ui494.js";
-import { useRenderElement as M } from "./als-react-ts-ui189.js";
-import { jsx as N } from "react/jsx-runtime";
-function y(o, t, r) {
-  return r ? c(o, t, r) : c(o / 100, t, {
-    style: "percent"
-  });
-}
-const E = /* @__PURE__ */ m.forwardRef(function(t, r) {
+import * as n from "react";
+import { useRenderElement as T } from "./als-react-ts-ui220.js";
+import { useNumberFieldRootContext as w } from "./als-react-ts-ui495.js";
+import { useNumberFieldButton as M } from "./als-react-ts-ui500.js";
+import { stateAttributesMapping as W } from "./als-react-ts-ui496.js";
+import { useButton as k } from "./als-react-ts-ui274.js";
+const _ = /* @__PURE__ */ n.forwardRef(function(t, r) {
   const {
-    format: u,
-    getAriaValueText: s,
-    locale: d,
-    max: l = 100,
-    min: n = 0,
-    value: e,
-    render: P,
-    className: w,
-    ...p
-  } = t, [v, f] = m.useState(), a = y(e, d, u);
-  let i = `${e}%`;
-  s ? i = s(a, e) : u && (i = a);
-  const x = {
-    "aria-labelledby": v,
-    "aria-valuemax": l,
-    "aria-valuemin": n,
-    "aria-valuenow": e,
-    "aria-valuetext": i,
-    role: "meter"
-  }, R = m.useMemo(() => ({
-    formattedValue: a,
-    max: l,
-    min: n,
-    setLabelId: f,
-    value: e
-  }), [a, l, n, f, e]), V = M("div", t, {
-    ref: r,
-    props: [x, p]
-  });
-  return /* @__PURE__ */ N(b.Provider, {
-    value: R,
-    children: V
+    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" && (E.displayName = "MeterRoot");
+process.env.NODE_ENV !== "production" && (_.displayName = "NumberFieldIncrement");
 export {
-  E as MeterRoot
+  _ as NumberFieldIncrement
 };

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

@@ -1,25 +1,82 @@
-import * as a from "react";
-import { useIsoLayoutEffect as i } from "./als-react-ts-ui193.js";
-import { useBaseUiId as f } from "./als-react-ts-ui249.js";
-import { useMeterRootContext as m } from "./als-react-ts-ui493.js";
-import { useRenderElement as d } from "./als-react-ts-ui189.js";
-const p = /* @__PURE__ */ a.forwardRef(function(t, o) {
+import * as n from "react";
+import { useRenderElement as w } from "./als-react-ts-ui220.js";
+import { useNumberFieldRootContext as I } from "./als-react-ts-ui495.js";
+import { useNumberFieldButton as M } from "./als-react-ts-ui500.js";
+import { stateAttributesMapping as W } from "./als-react-ts-ui496.js";
+import { useButton as k } from "./als-react-ts-ui274.js";
+const _ = /* @__PURE__ */ n.forwardRef(function(t, r) {
   const {
-    render: c,
-    className: l,
-    id: s,
-    ...n
-  } = t, e = f(s), {
-    setLabelId: r
-  } = m();
-  return i(() => (r(e), () => r(void 0)), [e, r]), d("span", t, {
-    ref: o,
-    props: [{
-      id: e
-    }, n]
+    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" && (p.displayName = "MeterLabel");
+process.env.NODE_ENV !== "production" && (_.displayName = "NumberFieldDecrement");
 export {
-  p as MeterLabel
+  _ as NumberFieldDecrement
 };

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

@@ -1,17 +1,170 @@
-import * as o from "react";
-import { useRenderElement as a } from "./als-react-ts-ui189.js";
-const s = /* @__PURE__ */ o.forwardRef(function(e, r) {
+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-ui336.js";
+import { useStableCallback as I } from "./als-react-ts-ui223.js";
+import { useNumberFieldRootContext as H } from "./als-react-ts-ui495.js";
+import { stateAttributesMapping as Q } from "./als-react-ts-ui496.js";
+import { NumberFieldScrubAreaContext as Z } from "./als-react-ts-ui501.js";
+import { useRenderElement as ee } from "./als-react-ts-ui220.js";
+import { getViewportRect as te } from "./als-react-ts-ui502.js";
+import { subscribeToVisualViewportResize as re } from "./als-react-ts-ui503.js";
+import { DEFAULT_STEP as ne } from "./als-react-ts-ui498.js";
+import { createGenericEventDetails as oe } from "./als-react-ts-ui273.js";
+import { jsx as ue } from "react/jsx-runtime";
+import { getWindow as se } from "./als-react-ts-ui338.js";
+import { scrub as O } from "./als-react-ts-ui275.js";
+const ie = /* @__PURE__ */ s.forwardRef(function(g, U) {
   const {
-    render: n,
-    className: f,
-    ...t
-  } = e;
-  return a("div", e, {
-    ref: r,
-    props: t
+    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" && (s.displayName = "MeterTrack");
+process.env.NODE_ENV !== "production" && (ie.displayName = "NumberFieldScrubArea");
 export {
-  s as MeterTrack
+  ie as NumberFieldScrubArea
 };

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

@@ -1,25 +1,41 @@
-import * as i from "react";
-import { valueToPercent as a } from "./als-react-ts-ui495.js";
-import { useMeterRootContext as s } from "./als-react-ts-ui493.js";
-import { useRenderElement as c } from "./als-react-ts-ui189.js";
-const m = /* @__PURE__ */ i.forwardRef(function(t, r) {
+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-ui495.js";
+import { stateAttributesMapping as N } from "./als-react-ts-ui496.js";
+import { useNumberFieldScrubAreaContext as R } from "./als-react-ts-ui501.js";
+import { useRenderElement as A } from "./als-react-ts-ui220.js";
+const C = /* @__PURE__ */ o.forwardRef(function(e, t) {
   const {
-    render: p,
-    className: f,
-    ...o
-  } = t, e = s(), n = a(e.value, e.min, e.max);
-  return c("div", t, {
-    ref: r,
+    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: {
-        insetInlineStart: 0,
-        height: "inherit",
-        width: `${n}%`
+        position: "fixed",
+        top: 0,
+        left: 0,
+        pointerEvents: "none"
       }
-    }, o]
+    }, s],
+    stateAttributesMapping: N
   });
+  return r && /* @__PURE__ */ p.createPortal(r, b(c).body);
 });
-process.env.NODE_ENV !== "production" && (m.displayName = "MeterIndicator");
+process.env.NODE_ENV !== "production" && (C.displayName = "NumberFieldScrubAreaCursor");
 export {
-  m as MeterIndicator
+  C as NumberFieldScrubAreaCursor
 };

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

@@ -1,25 +1,59 @@
-import * as s from "react";
-import { useMeterRootContext as i } from "./als-react-ts-ui493.js";
-import { useRenderElement as u } from "./als-react-ts-ui189.js";
-const f = /* @__PURE__ */ s.forwardRef(function(e, n) {
-  const {
-    className: c,
-    render: d,
-    children: r,
-    ...a
-  } = e, {
-    value: t,
-    formattedValue: o
-  } = i();
-  return u("span", e, {
-    ref: n,
-    props: [{
-      "aria-hidden": !0,
-      children: typeof r == "function" ? r(o, t) : (o || t) ?? ""
-    }, a]
-  });
-});
-process.env.NODE_ENV !== "production" && (f.displayName = "MeterValue");
+const _ = "_root_17v0f_9", r = "_list_17v0f_48", o = "_item_17v0f_60", t = "_trigger_17v0f_71", i = "_icon_17v0f_157", n = "_positioner_17v0f_171", l = "_popup_17v0f_226", e = "_content_17v0f_271", f = "_viewport_17v0f_311", p = "_link_17v0f_321", v = "_linkCard_17v0f_369", a = "_linkCardTitle_17v0f_383", s = "_linkCardDescription_17v0f_391", g = "_arrow_17v0f_402", c = "_arrowFill_17v0f_428", d = "_arrowOuterStroke_17v0f_432", k = "_arrowInnerStroke_17v0f_436", m = "_backdrop_17v0f_443", u = {
+  root: _,
+  "root--default": "_root--default_17v0f_17",
+  "root--filled": "_root--filled_17v0f_22",
+  "root--minimal": "_root--minimal_17v0f_27",
+  "root--sm": "_root--sm_17v0f_33",
+  "root--md": "_root--md_17v0f_37",
+  "root--lg": "_root--lg_17v0f_41",
+  list: r,
+  item: o,
+  trigger: t,
+  "trigger--sm": "_trigger--sm_17v0f_94",
+  "trigger--md": "_trigger--md_17v0f_100",
+  "trigger--lg": "_trigger--lg_17v0f_106",
+  "trigger--default": "_trigger--default_17v0f_113",
+  "trigger--filled": "_trigger--filled_17v0f_124",
+  "trigger--minimal": "_trigger--minimal_17v0f_137",
+  icon: i,
+  positioner: n,
+  popup: l,
+  "popup--default": "_popup--default_17v0f_255",
+  "popup--filled": "_popup--filled_17v0f_259",
+  "popup--minimal": "_popup--minimal_17v0f_263",
+  content: e,
+  viewport: f,
+  link: p,
+  "link--sm": "_link--sm_17v0f_351",
+  "link--md": "_link--md_17v0f_356",
+  "link--lg": "_link--lg_17v0f_361",
+  linkCard: v,
+  linkCardTitle: a,
+  linkCardDescription: s,
+  arrow: g,
+  arrowFill: c,
+  arrowOuterStroke: d,
+  arrowInnerStroke: k,
+  backdrop: m
+};
 export {
-  f as MeterValue
+  g as arrow,
+  c as arrowFill,
+  k as arrowInnerStroke,
+  d as arrowOuterStroke,
+  m as backdrop,
+  e as content,
+  u as default,
+  i as icon,
+  o as item,
+  p as link,
+  v as linkCard,
+  s as linkCardDescription,
+  a as linkCardTitle,
+  r as list,
+  l as popup,
+  n as positioner,
+  _ as root,
+  t as trigger,
+  f as viewport
 };