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

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

@@ -1,24 +1,27 @@
-const _ = "_root_1m4y4_2", a = "_track_1m4y4_10", r = "_indicator_1m4y4_19", t = "_label_1m4y4_27", i = "_value_1m4y4_34", e = "_indeterminate_1m4y4_1", n = {
-  root: _,
-  track: a,
-  indicator: r,
-  label: t,
-  value: i,
-  "size-sm": "_size-sm_1m4y4_42",
-  "size-md": "_size-md_1m4y4_46",
-  "size-lg": "_size-lg_1m4y4_50",
-  "variant-primary": "_variant-primary_1m4y4_55",
-  "variant-success": "_variant-success_1m4y4_60",
-  "variant-warning": "_variant-warning_1m4y4_65",
-  "variant-error": "_variant-error_1m4y4_70",
-  indeterminate: e
-};
+import * as i from "react";
+import { useRenderElement as s } from "./als-react-ts-ui220.js";
+import { useSliderRootContext as n } from "./als-react-ts-ui554.js";
+import { sliderStateAttributesMapping as a } from "./als-react-ts-ui553.js";
+const p = /* @__PURE__ */ i.forwardRef(function(e, t) {
+  const {
+    render: m,
+    className: c,
+    ...r
+  } = e, {
+    state: o
+  } = n();
+  return s("div", e, {
+    state: o,
+    ref: t,
+    props: [{
+      style: {
+        position: "relative"
+      }
+    }, r],
+    stateAttributesMapping: a
+  });
+});
+process.env.NODE_ENV !== "production" && (p.displayName = "SliderTrack");
 export {
-  n as default,
-  e as indeterminate,
-  r as indicator,
-  t as label,
-  _ as root,
-  a as track,
-  i as value
+  p as SliderTrack
 };

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

@@ -1,61 +1,56 @@
-import * as n from "react";
-import { useValueAsRef as N } from "./als-react-ts-ui318.js";
-import { formatNumber as f } from "./als-react-ts-ui484.js";
-import { useRenderElement as P } from "./als-react-ts-ui226.js";
-import { ProgressRootContext as A } from "./als-react-ts-ui525.js";
-import { progressStateAttributesMapping as M } from "./als-react-ts-ui526.js";
-import { jsx as y } from "react/jsx-runtime";
-function E(r, e, s) {
-  return r == null ? "" : s ? f(r, e, s) : f(r / 100, e, {
-    style: "percent"
-  });
+import * as h from "react";
+import { useOnMount as I } from "./als-react-ts-ui324.js";
+import { valueToPercent as S } from "./als-react-ts-ui492.js";
+import { useRenderElement as w } from "./als-react-ts-ui220.js";
+import { useSliderRootContext as E } from "./als-react-ts-ui554.js";
+import { sliderStateAttributesMapping as M } from "./als-react-ts-ui553.js";
+function $(e, s, n, d, a, r) {
+  const c = n === void 0 || s && d === void 0 ? "hidden" : void 0, t = e ? "bottom" : "insetInlineStart", o = e ? "height" : "width", i = {
+    visibility: a && !r ? "hidden" : c,
+    position: e ? "absolute" : "relative",
+    [e ? "width" : "height"]: "inherit"
+  };
+  return i["--start-position"] = `${n ?? 0}%`, s ? (i["--relative-size"] = `${(d ?? 0) - (n ?? 0)}%`, i[t] = "var(--start-position)", i[o] = "var(--relative-size)", i) : (i[t] = 0, i[o] = "var(--start-position)", i);
 }
-function w(r, e) {
-  return e == null ? "indeterminate progress" : r || `${e}%`;
+function N(e, s, n, d) {
+  const a = e ? "bottom" : "insetInlineStart", r = e ? "height" : "width", t = {
+    position: e ? "absolute" : "relative",
+    [e ? "width" : "height"]: "inherit"
+  };
+  if (!s)
+    return t[a] = 0, t[r] = `${n}%`, t;
+  const o = d - n;
+  return t[a] = `${n}%`, t[r] = `${o}%`, t;
 }
-const D = /* @__PURE__ */ n.forwardRef(function(e, s) {
+const R = /* @__PURE__ */ h.forwardRef(function(s, n) {
   const {
-    format: p,
-    getAriaValueText: c = w,
-    locale: d,
-    max: a = 100,
-    min: i = 0,
-    value: t,
-    render: I,
-    className: O,
-    ...g
-  } = e, [b, l] = n.useState(), x = N(p);
-  let o = "indeterminate";
-  Number.isFinite(t) && (o = t === a ? "complete" : "progressing");
-  const u = E(t, d, x.current), m = n.useMemo(() => ({
-    status: o
-  }), [o]), R = {
-    "aria-labelledby": b,
-    "aria-valuemax": a,
-    "aria-valuemin": i,
-    "aria-valuenow": t ?? void 0,
-    "aria-valuetext": c(u, t),
-    role: "progressbar"
-  }, V = n.useMemo(() => ({
-    formattedValue: u,
-    max: a,
-    min: i,
-    setLabelId: l,
-    state: m,
-    status: o,
-    value: t
-  }), [u, a, i, l, m, o, t]), v = P("div", e, {
-    state: m,
-    ref: s,
-    props: [R, g],
+    render: d,
+    className: a,
+    ...r
+  } = s, {
+    indicatorPosition: c,
+    inset: t,
+    max: o,
+    min: l,
+    orientation: i,
+    renderBeforeHydration: m,
+    state: g,
+    values: u
+  } = E(), [y, b] = h.useState(!1);
+  I(() => b(!0));
+  const f = i === "vertical", p = u.length > 1, v = t ? $(f, p, c[0], c[1], m, y) : N(f, p, S(u[0], l, o), S(u[u.length - 1], l, o));
+  return w("div", s, {
+    state: g,
+    ref: n,
+    props: [{
+      "data-base-ui-slider-indicator": m ? "" : void 0,
+      style: v,
+      suppressHydrationWarning: m || void 0
+    }, r],
     stateAttributesMapping: M
   });
-  return /* @__PURE__ */ y(A.Provider, {
-    value: V,
-    children: v
-  });
 });
-process.env.NODE_ENV !== "production" && (D.displayName = "ProgressRoot");
+process.env.NODE_ENV !== "production" && (R.displayName = "SliderIndicator");
 export {
-  D as ProgressRoot
+  R as SliderIndicator
 };

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

@@ -1,23 +1,230 @@
-import * as o from "react";
-import { useRenderElement as n } from "./als-react-ts-ui226.js";
-import { useProgressRootContext as a } from "./als-react-ts-ui525.js";
-import { progressStateAttributesMapping as p } from "./als-react-ts-ui526.js";
-const i = /* @__PURE__ */ o.forwardRef(function(e, r) {
+import * as f from "react";
+import { useStableCallback as He } from "./als-react-ts-ui223.js";
+import { useIsoLayoutEffect as J } from "./als-react-ts-ui224.js";
+import { useOnMount as Ue } from "./als-react-ts-ui324.js";
+import { useMergedRefs as ze } from "./als-react-ts-ui297.js";
+import { visuallyHidden as Q } from "./als-react-ts-ui376.js";
+import { formatNumber as w } from "./als-react-ts-ui491.js";
+import { useBaseUiId as Z } from "./als-react-ts-ui276.js";
+import { useRenderElement as Ge } from "./als-react-ts-ui220.js";
+import { valueToPercent as Ye } from "./als-react-ts-ui492.js";
+import { COMPOSITE_KEYS as je, HOME as te, END as re, ARROW_LEFT as ne, ARROW_DOWN as oe, ARROW_RIGHT as ie, ARROW_UP as se } from "./als-react-ts-ui281.js";
+import { useCompositeListItem as qe } from "./als-react-ts-ui300.js";
+import { useDirection as Xe } from "./als-react-ts-ui295.js";
+import { useFieldRootContext as Je } from "./als-react-ts-ui398.js";
+import { useLabelableId as Qe } from "./als-react-ts-ui400.js";
+import { getMidpoint as Ze } from "./als-react-ts-ui555.js";
+import { getSliderValue as et } from "./als-react-ts-ui551.js";
+import { roundValueToStep as tt } from "./als-react-ts-ui556.js";
+import { useSliderRootContext as rt } from "./als-react-ts-ui554.js";
+import { sliderStateAttributesMapping as nt } from "./als-react-ts-ui553.js";
+import { SliderThumbDataAttributes as ot } from "./als-react-ts-ui558.js";
+import { script as it } from "./als-react-ts-ui559.js";
+import { jsxs as st, jsx as ee } from "react/jsx-runtime";
+import { mergeProps as at } from "./als-react-ts-ui323.js";
+const ae = "PageUp", ue = "PageDown", ut = /* @__PURE__ */ new Set([se, oe, ne, ie, te, re, ae, ue]);
+function lt(u, i, l, h) {
+  if (!(i < 0))
+    return u.length === 2 ? i === 0 ? `${w(u[i], h, l)} start range` : `${w(u[i], h, l)} end range` : l ? w(u[i], h, l) : void 0;
+}
+function R(u, i, l, h, D) {
+  return l === 1 ? Math.min(u + i, D) : Math.max(u - i, h);
+}
+const ct = /* @__PURE__ */ f.forwardRef(function(i, l) {
   const {
-    render: c,
-    className: f,
-    ...t
-  } = e, {
-    state: s
-  } = a();
-  return n("div", e, {
-    state: s,
-    ref: r,
-    props: t,
-    stateAttributesMapping: p
+    render: h,
+    children: D,
+    className: dt,
+    "aria-describedby": le,
+    "aria-label": ce,
+    "aria-labelledby": de,
+    disabled: fe = !1,
+    getAriaLabel: _,
+    getAriaValueText: K,
+    id: me,
+    index: pe,
+    inputRef: be,
+    onBlur: he,
+    onFocus: ge,
+    onKeyDown: ft,
+    tabIndex: Pe,
+    ...Re
+  } = i, ye = Z(me), {
+    active: E,
+    lastUsedThumbIndex: k,
+    controlRef: Ie,
+    disabled: xe,
+    validation: C,
+    formatOptionsRef: W,
+    handleInputChange: v,
+    inset: m,
+    labelId: Se,
+    largeStep: g,
+    locale: $,
+    max: s,
+    min: o,
+    minStepsBetweenValues: H,
+    name: Te,
+    orientation: y,
+    pressedInputRef: U,
+    pressedThumbCenterOffsetRef: Me,
+    pressedThumbIndexRef: Ae,
+    renderBeforeHydration: S,
+    setActive: z,
+    setIndicatorPosition: G,
+    state: Oe,
+    step: c,
+    values: a
+  } = rt(), we = Xe(), De = fe || xe, p = a.length > 1, d = y === "vertical", P = we === "rtl", {
+    setTouched: Ee,
+    setFocused: Y,
+    validationMode: ke
+  } = Je(), I = f.useRef(null), T = f.useRef(null), Ce = Z(), Fe = Qe(), F = p ? Ce : Fe, Ne = f.useMemo(() => ({
+    inputId: F
+  }), [F]), {
+    ref: Ve,
+    index: Be
+  } = qe({
+    metadata: Ne
+  }), t = p ? pe ?? Be : 0, j = t === a.length - 1, b = a[t], x = Ye(b, o, s), [N, Le] = f.useState(!1), [V, _e] = f.useState();
+  Ue(() => Le(!0));
+  const q = k >= 0 && k < a.length ? k : -1, M = He(() => {
+    const e = Ie.current, r = I.current;
+    if (!e || !r)
+      return;
+    const n = r.getBoundingClientRect(), A = e.getBoundingClientRect(), O = d ? "height" : "width", $e = A[O] - n[O], B = (n[O] / 2 + $e * x / 100) / A[O] * 100;
+    _e(B), t === 0 ? G((L) => [B, L[1]]) : j && G((L) => [L[0], B]);
+  });
+  J(() => {
+    m && queueMicrotask(M);
+  }, [M, m]), J(() => {
+    m && M();
+  }, [M, m, x]);
+  const Ke = f.useCallback(() => {
+    const e = d ? "bottom" : "insetInlineStart", r = d ? "left" : "top";
+    let n;
+    return p ? E === t ? n = 2 : q === t && (n = 1) : E === t && (n = 1), m ? {
+      "--position": `${V}%`,
+      visibility: S && !N || V === void 0 ? "hidden" : void 0,
+      position: "absolute",
+      [e]: "var(--position)",
+      [r]: "50%",
+      translate: `${(d || !P ? -1 : 1) * 50}% ${(d ? 1 : -1) * 50}%`,
+      zIndex: n
+    } : Number.isFinite(x) ? {
+      position: "absolute",
+      [e]: `${x}%`,
+      [r]: "50%",
+      translate: `${(d || !P ? -1 : 1) * 50}% ${(d ? 1 : -1) * 50}%`,
+      zIndex: n
+    } : Q;
+  }, [E, t, m, N, V, p, S, P, q, x, d]);
+  let X;
+  y === "vertical" && (X = P ? "vertical-rl" : "vertical-lr");
+  const We = at({
+    "aria-label": typeof _ == "function" ? _(t) : ce,
+    "aria-labelledby": de ?? Se,
+    "aria-describedby": le,
+    "aria-orientation": y,
+    "aria-valuenow": b,
+    "aria-valuetext": typeof K == "function" ? K(w(b, $, W.current ?? void 0), b, t) : lt(a, t, W.current ?? void 0, $),
+    disabled: De,
+    id: F,
+    max: s,
+    min: o,
+    name: Te,
+    onChange(e) {
+      v(e.target.valueAsNumber, t, e);
+    },
+    onFocus() {
+      z(t), Y(!0);
+    },
+    onBlur() {
+      I.current && (z(-1), Ee(!0), Y(!1), ke === "onBlur" && C.commit(et(b, t, o, s, p, a)));
+    },
+    onKeyDown(e) {
+      if (!ut.has(e.key))
+        return;
+      je.has(e.key) && e.stopPropagation();
+      let r = null;
+      const n = tt(b, c, o);
+      switch (e.key) {
+        case se:
+          r = R(n, e.shiftKey ? g : c, 1, o, s);
+          break;
+        case ie:
+          r = R(n, e.shiftKey ? g : c, P ? -1 : 1, o, s);
+          break;
+        case oe:
+          r = R(n, e.shiftKey ? g : c, -1, o, s);
+          break;
+        case ne:
+          r = R(n, e.shiftKey ? g : c, P ? 1 : -1, o, s);
+          break;
+        case ae:
+          r = R(n, g, 1, o, s);
+          break;
+        case ue:
+          r = R(n, g, -1, o, s);
+          break;
+        case re:
+          r = s, p && (r = Number.isFinite(a[t + 1]) ? a[t + 1] - c * H : s);
+          break;
+        case te:
+          r = o, p && (r = Number.isFinite(a[t - 1]) ? a[t - 1] + c * H : o);
+          break;
+      }
+      r !== null && (v(r, t, e), e.preventDefault());
+    },
+    step: c,
+    style: {
+      ...Q,
+      // So that VoiceOver's focus indicator matches the thumb's dimensions
+      width: "100%",
+      height: "100%",
+      writingMode: X
+    },
+    tabIndex: Pe ?? void 0,
+    type: "range",
+    value: b ?? ""
+  }, C.getInputValidationProps), ve = ze(T, C.inputRef, be);
+  return Ge("div", i, {
+    state: Oe,
+    ref: [l, Ve, I],
+    props: [{
+      [ot.index]: t,
+      children: /* @__PURE__ */ st(f.Fragment, {
+        children: [D, /* @__PURE__ */ ee("input", {
+          ref: ve,
+          ...We
+        }), m && !N && S && // this must be rendered with the last thumb to ensure all
+        // preceding thumbs are already rendered in the DOM
+        j && /* @__PURE__ */ ee("script", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: it
+          },
+          suppressHydrationWarning: !0
+        })]
+      }),
+      id: ye,
+      onBlur: he,
+      onFocus: ge,
+      onPointerDown(e) {
+        if (Ae.current = t, I.current != null) {
+          const r = y === "horizontal" ? "x" : "y", n = Ze(I.current), A = (y === "horizontal" ? e.clientX : e.clientY) - n[r];
+          Me.current = A;
+        }
+        T.current != null && U.current !== T.current && (U.current = T.current);
+      },
+      style: Ke(),
+      suppressHydrationWarning: S || void 0,
+      tabIndex: -1
+    }, Re],
+    stateAttributesMapping: nt
   });
 });
-process.env.NODE_ENV !== "production" && (i.displayName = "ProgressTrack");
+process.env.NODE_ENV !== "production" && (ct.displayName = "SliderThumb");
 export {
-  i as ProgressTrack
+  ct as SliderThumb
 };

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

@@ -1,33 +1,51 @@
-import * as n from "react";
-import { useRenderElement as u } from "./als-react-ts-ui226.js";
-import { valueToPercent as c } from "./als-react-ts-ui485.js";
-import { useProgressRootContext as p } from "./als-react-ts-ui525.js";
-import { progressStateAttributesMapping as f } from "./als-react-ts-ui526.js";
-const d = /* @__PURE__ */ n.forwardRef(function(r, s) {
+import * as o from "react";
+import { formatNumber as M } from "./als-react-ts-ui491.js";
+import { useRenderElement as v } from "./als-react-ts-ui220.js";
+import { useSliderRootContext as V } from "./als-react-ts-ui554.js";
+import { sliderStateAttributesMapping as b } from "./als-react-ts-ui553.js";
+const N = /* @__PURE__ */ o.forwardRef(function(i, m) {
   const {
-    render: N,
-    className: P,
-    ...o
-  } = r, {
-    max: i,
-    min: a,
-    value: e,
-    state: l
-  } = p(), t = Number.isFinite(e) && e !== null ? c(e, a, i) : null, m = n.useCallback(() => t == null ? {} : {
-    insetInlineStart: 0,
-    height: "inherit",
-    width: `${t}%`
-  }, [t]);
-  return u("div", r, {
-    state: l,
-    ref: s,
+    "aria-live": f = "off",
+    render: S,
+    className: g,
+    children: a,
+    ...p
+  } = i, {
+    thumbMap: u,
+    state: d,
+    values: r,
+    formatOptionsRef: s,
+    locale: l
+  } = V(), c = o.useMemo(() => {
+    let t = "";
+    for (const e of u.values())
+      e?.inputId && (t += `${e.inputId} `);
+    return t.trim() === "" ? void 0 : t.trim();
+  }, [u]), n = o.useMemo(() => {
+    const t = [];
+    for (let e = 0; e < r.length; e += 1)
+      t.push(M(r[e], l, s.current ?? void 0));
+    return t;
+  }, [s, l, r]), h = o.useMemo(() => {
+    const t = [];
+    for (let e = 0; e < r.length; e += 1)
+      t.push(n[e] || r[e]);
+    return t.join(" – ");
+  }, [r, n]);
+  return v("output", i, {
+    state: d,
+    ref: m,
     props: [{
-      style: m()
-    }, o],
-    stateAttributesMapping: f
+      // off by default because it will keep announcing when the slider is being dragged
+      // and also when the value is changing (but not yet committed)
+      "aria-live": f,
+      children: typeof a == "function" ? a(n, r) : h,
+      htmlFor: c
+    }, p],
+    stateAttributesMapping: b
   });
 });
-process.env.NODE_ENV !== "production" && (d.displayName = "ProgressIndicator");
+process.env.NODE_ENV !== "production" && (N.displayName = "SliderValue");
 export {
-  d as ProgressIndicator
+  N as SliderValue
 };