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

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

@@ -0,0 +1,82 @@
+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 {
+  _ as NumberFieldIncrement
+};

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

@@ -0,0 +1,82 @@
+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 {
+  _ as NumberFieldDecrement
+};

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

@@ -0,0 +1,170 @@
+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 {
+  ie as NumberFieldScrubArea
+};

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

@@ -0,0 +1,41 @@
+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 {
+  C as NumberFieldScrubAreaCursor
+};

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

@@ -0,0 +1,55 @@
+const _ = "_group_1qx6w_10", r = "_radio_1qx6w_16", o = "_groupLabel_1qx6w_24", i = "_required_1qx6w_45", e = "_radioGroup_1qx6w_54", d = "_item_1qx6w_74", a = "_indicator_1qx6w_215", t = "_content_1qx6w_257", l = "_label_1qx6w_264", s = "_description_1qx6w_283", x = "_helperText_1qx6w_306", c = "_errorText_1qx6w_313", n = {
+  group: _,
+  "group--error": "_group--error_1qx6w_16",
+  radio: r,
+  groupLabel: o,
+  "groupLabel--sm": "_groupLabel--sm_1qx6w_33",
+  "groupLabel--md": "_groupLabel--md_1qx6w_37",
+  "groupLabel--lg": "_groupLabel--lg_1qx6w_41",
+  required: i,
+  radioGroup: e,
+  "radioGroup--vertical": "_radioGroup--vertical_1qx6w_59",
+  "radioGroup--horizontal": "_radioGroup--horizontal_1qx6w_64",
+  item: d,
+  "item--sm": "_item--sm_1qx6w_83",
+  "item--md": "_item--md_1qx6w_87",
+  "item--lg": "_item--lg_1qx6w_91",
+  "item--disabled": "_item--disabled_1qx6w_95",
+  "radio--sm": "_radio--sm_1qx6w_121",
+  "radio--md": "_radio--md_1qx6w_126",
+  "radio--lg": "_radio--lg_1qx6w_131",
+  "radio--primary": "_radio--primary_1qx6w_143",
+  "radio--secondary": "_radio--secondary_1qx6w_149",
+  "radio--success": "_radio--success_1qx6w_155",
+  "radio--error": "_radio--error_1qx6w_161",
+  indicator: a,
+  "indicator--sm": "_indicator--sm_1qx6w_238",
+  "indicator--md": "_indicator--md_1qx6w_243",
+  "indicator--lg": "_indicator--lg_1qx6w_248",
+  content: t,
+  label: l,
+  "label--sm": "_label--sm_1qx6w_271",
+  "label--md": "_label--md_1qx6w_275",
+  "label--lg": "_label--lg_1qx6w_279",
+  description: s,
+  "description--sm": "_description--sm_1qx6w_290",
+  "description--md": "_description--md_1qx6w_294",
+  "description--lg": "_description--lg_1qx6w_298",
+  helperText: x,
+  errorText: c
+};
+export {
+  t as content,
+  n as default,
+  s as description,
+  c as errorText,
+  _ as group,
+  o as groupLabel,
+  x as helperText,
+  a as indicator,
+  d as item,
+  l as label,
+  r as radio,
+  e as radioGroup,
+  i as required
+};

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

@@ -0,0 +1,104 @@
+import { jsx as p } from "react/jsx-runtime";
+import * as t from "react";
+import n from "./als-react-ts-ui79.js";
+import { PopoverTrigger as P } from "./als-react-ts-ui80.js";
+import { PopoverPositioner as c } from "./als-react-ts-ui81.js";
+import { PopoverPopup as f } from "./als-react-ts-ui82.js";
+import { PopoverArrow as a } from "./als-react-ts-ui83.js";
+import { PopoverTitle as m } from "./als-react-ts-ui84.js";
+import { PopoverDescription as v } from "./als-react-ts-ui85.js";
+import { PopoverClose as l } from "./als-react-ts-ui86.js";
+import { PopoverBackdrop as A } from "./als-react-ts-ui87.js";
+import { PopoverRoot as u } from "./als-react-ts-ui88.js";
+import { PopoverPortal as L } from "./als-react-ts-ui89.js";
+const S = u, d = t.forwardRef(function({ children: o, ...r }, e) {
+  return /* @__PURE__ */ p(
+    P,
+    {
+      ...r,
+      ref: e,
+      nativeButton: !1,
+      render: (s) => t.cloneElement(o, s)
+    }
+  );
+}), w = L, R = t.forwardRef(function(o, r) {
+  return /* @__PURE__ */ p(c, { ...o, ref: r });
+}), $ = t.forwardRef(function({ className: o, ...r }, e) {
+  return /* @__PURE__ */ p(
+    f,
+    {
+      ...r,
+      className: `${n.popup} ${o || ""}`,
+      ref: e
+    }
+  );
+}), g = t.forwardRef(function({ className: o, ...r }, e) {
+  return /* @__PURE__ */ p(
+    a,
+    {
+      ...r,
+      className: `${n.arrow} ${o || ""}`,
+      ref: e
+    }
+  );
+}), T = t.forwardRef(function({ className: o, ...r }, e) {
+  return /* @__PURE__ */ p(
+    m,
+    {
+      ...r,
+      className: `${n.title} ${o || ""}`,
+      ref: e
+    }
+  );
+}), N = t.forwardRef(function({ className: o, ...r }, e) {
+  return /* @__PURE__ */ p(
+    v,
+    {
+      ...r,
+      className: `${n.description} ${o || ""}`,
+      ref: e
+    }
+  );
+}), k = t.forwardRef(function({ className: o, ...r }, e) {
+  return /* @__PURE__ */ p(
+    l,
+    {
+      ...r,
+      className: `${n.close} ${o || ""}`,
+      ref: e
+    }
+  );
+}), B = t.forwardRef(function({ className: o, ...r }, e) {
+  return /* @__PURE__ */ p(
+    A,
+    {
+      ...r,
+      className: `${n.backdrop} ${o || ""}`,
+      ref: e
+    }
+  );
+}), H = {
+  Root: S,
+  Trigger: d,
+  Portal: w,
+  Positioner: R,
+  Popup: $,
+  Arrow: g,
+  Title: T,
+  Description: N,
+  Close: k,
+  Backdrop: B
+};
+export {
+  H as ALSPopover,
+  g as ALSPopoverArrow,
+  B as ALSPopoverBackdrop,
+  k as ALSPopoverClose,
+  N as ALSPopoverDescription,
+  $ as ALSPopoverPopup,
+  w as ALSPopoverPortal,
+  R as ALSPopoverPositioner,
+  S as ALSPopoverRoot,
+  T as ALSPopoverTitle,
+  d as ALSPopoverTrigger
+};

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

@@ -0,0 +1,141 @@
+import * as n from "react";
+import { useControlled as Z } from "./als-react-ts-ui282.js";
+import { useMergedRefs as $ } from "./als-react-ts-ui287.js";
+import { useStableCallback as l } from "./als-react-ts-ui192.js";
+import { visuallyHidden as ee } from "./als-react-ts-ui375.js";
+import { useBaseUiId as oe } from "./als-react-ts-ui249.js";
+import { SHIFT as te } from "./als-react-ts-ui254.js";
+import { CompositeRoot as re } from "./als-react-ts-ui484.js";
+import { useField as ae } from "./als-react-ts-ui403.js";
+import { useFieldRootContext as ie } from "./als-react-ts-ui398.js";
+import { fieldValidityMapping as ne } from "./als-react-ts-ui409.js";
+import { useFieldsetRootContext as se } from "./als-react-ts-ui418.js";
+import { useFormContext as le } from "./als-react-ts-ui402.js";
+import { useLabelableContext as de } from "./als-react-ts-ui399.js";
+import { useValueChanged as ue } from "./als-react-ts-ui406.js";
+import { RadioGroupContext as me } from "./als-react-ts-ui496.js";
+import { jsxs as fe, jsx as P } from "react/jsx-runtime";
+import { NOOP as ce } from "./als-react-ts-ui303.js";
+import { contains as pe } from "./als-react-ts-ui331.js";
+import { mergeProps as be } from "./als-react-ts-ui304.js";
+const ge = [te], Ce = /* @__PURE__ */ n.forwardRef(function(x, F) {
+  const {
+    render: I,
+    className: v,
+    disabled: M,
+    readOnly: r,
+    required: a,
+    onValueChange: N,
+    value: O,
+    defaultValue: k,
+    name: E,
+    inputRef: S,
+    id: T,
+    ...p
+  } = x, {
+    setTouched: b,
+    setFocused: m,
+    shouldValidateOnChange: D,
+    validationMode: G,
+    name: w,
+    disabled: K,
+    state: d,
+    validation: t,
+    setDirty: q,
+    setFilled: A,
+    validityData: B
+  } = ie(), {
+    labelId: H
+  } = de(), {
+    clearErrors: j
+  } = le(), U = se(!0), i = K || M, s = w ?? E, g = oe(T), [e, _] = Z({
+    controlled: O,
+    default: k,
+    name: "RadioGroup",
+    state: "value"
+  }), f = l(N), C = l((o, V) => {
+    f(o, V), !V.isCanceled && _(o);
+  }), u = n.useRef(null), R = l((o) => {
+    u.current == null && o != null && (u.current = o);
+  });
+  ae({
+    id: g,
+    commit: t.commit,
+    value: e,
+    controlRef: u,
+    name: s,
+    getValue: () => e ?? null
+  }), ue(e, () => {
+    j(s), q(e !== B.initialValue), A(e != null), D() ? t.commit(e) : t.commit(e, !0);
+  });
+  const [h, c] = n.useState(!1), z = l((o) => {
+    pe(o.currentTarget, o.relatedTarget) || (b(!0), m(!1), G === "onBlur" && t.commit(e));
+  }), J = l((o) => {
+    o.key.startsWith("Arrow") && (b(!0), c(!0), m(!0));
+  }), y = n.useMemo(() => e == null ? "" : typeof e == "string" ? e : JSON.stringify(e), [e]), L = $(t.inputRef, S), W = be({
+    value: y,
+    ref: L,
+    id: g,
+    name: y ? s : void 0,
+    disabled: i,
+    readOnly: r,
+    required: a,
+    "aria-labelledby": p["aria-labelledby"] ?? U?.legendId,
+    "aria-hidden": !0,
+    tabIndex: -1,
+    style: ee,
+    onChange: ce,
+    // suppress a Next.js error
+    onFocus() {
+      u.current?.focus();
+    }
+  }, t.getInputValidationProps), Y = n.useMemo(() => ({
+    ...d,
+    disabled: i ?? !1,
+    required: a ?? !1,
+    readOnly: r ?? !1
+  }), [d, i, r, a]), Q = n.useMemo(() => ({
+    ...d,
+    checkedValue: e,
+    disabled: i,
+    validation: t,
+    name: s,
+    onValueChange: f,
+    readOnly: r,
+    registerControlRef: R,
+    required: a,
+    setCheckedValue: C,
+    setTouched: c,
+    touched: h
+  }), [e, i, t, d, s, f, r, R, a, C, c, h]), X = {
+    role: "radiogroup",
+    "aria-required": a || void 0,
+    "aria-disabled": i || void 0,
+    "aria-readonly": r || void 0,
+    "aria-labelledby": H,
+    onFocus() {
+      m(!0);
+    },
+    onBlur: z,
+    onKeyDownCapture: J
+  };
+  return /* @__PURE__ */ fe(me.Provider, {
+    value: Q,
+    children: [/* @__PURE__ */ P(re, {
+      render: I,
+      className: v,
+      state: Y,
+      props: [X, t.getValidationProps, p],
+      refs: [F],
+      stateAttributesMapping: ne,
+      enableHomeAndEndKeys: !1,
+      modifierKeys: ge
+    }), /* @__PURE__ */ P("input", {
+      ...W
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (Ce.displayName = "RadioGroup");
+export {
+  Ce as RadioGroup
+};