@telefonica/mistica 16.0.0 → 16.1.0

package/dist-es/slider.js

@@ -54,9 +54,9 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as b, jsxs as te } from "react/jsx-runtime";
+import { jsx as g, jsxs as te } from "react/jsx-runtime";
 import * as s from "react";
-import { iosThumb as oe, defaultThumb as re, thumbHover as ne, thumbActive as ae, container as ce, disabled as se, track as ie, thumbContainer as le, input as ue } from "./slider.css-mistica.js";
+import { iosThumb as oe, defaultThumb as ne, thumbHover as re, thumbActive as ae, container as ce, disabled as se, track as ie, thumbContainer as le, input as ue } from "./slider.css-mistica.js";
 import { vars as Y } from "./skins/skin-contract.css-mistica.js";
 import { isTouchableDevice as fe } from "./utils/environment.js";
 import j from "classnames";
@@ -66,24 +66,24 @@ import he from "./tooltip.js";
 import be from "./box.js";
 import { useControlProps as ge } from "./form-context.js";
 import { combineRefs as ve } from "./utils/common.js";
-const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t), I = (n, t, o, a, g)=>{
+const Re = 48, me = 20, Ce = 28, Ve = (r, t, o)=>t >= o ? 0 : (r - t) / (o - t), I = (r, t, o, a, h)=>{
     const v = (i)=>{
         if (i === void 0) return t;
-        const B = n ? t + (o - t) * i : i;
+        const B = r ? t + (o - t) * i : i;
         return Math.max(t, Math.min(o, B));
     };
     if (t >= o) return t;
-    const h = v(g), P = t + Math.floor((h - t) / a) * a, R = t + Math.ceil((h - t) / a) * a;
-    return R <= o && R - h <= h - P ? R : P;
-}, w = (n, t, o)=>{
+    const b = v(h), P = t + Math.floor((b - t) / a) * a, R = t + Math.ceil((b - t) / a) * a;
+    return R <= o && R - b <= b - P ? R : P;
+}, w = (r, t, o)=>{
     if (!o) return t;
-    if (t === void 0) return n;
+    if (t === void 0) return r;
     let a = 0;
-    return o.forEach((g, v)=>{
-        o && Math.abs(g - t) <= Math.abs(o[a] - t) && (a = v);
+    return o.forEach((h, v)=>{
+        o && Math.abs(h - t) <= Math.abs(o[a] - t) && (a = v);
     }), a;
 }, Pe = /*#__PURE__*/ s.forwardRef((_param, B)=>{
-    var { values: n, step: t = 1, min: o = 0, max: a = 100, "aria-label": g, "aria-labelledby": v, id: h, dataAttributes: P, tooltip: R } = _param, i = _object_without_properties(_param, [
+    var { values: r, step: t = 1, min: o = 0, max: a = 100, "aria-label": h, "aria-labelledby": v, id: b, dataAttributes: P, tooltip: R } = _param, i = _object_without_properties(_param, [
         "values",
         "step",
         "min",
@@ -94,21 +94,22 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
         "dataAttributes",
         "tooltip"
     ]);
-    n && (n.length === 0 ? n = void 0 : a = n.length - 1), t = t | 0, t = t <= 0 ? 1 : t;
+    r && (r.length === 0 ? r = void 0 : a = r.length - 1), t = t | 0, t = t <= 0 ? 1 : t;
     const { defaultValue: Z, value: D, onChange: H, focusableRef: x, disabled: U, name: z } = ge({
         name: i.name,
-        value: i.value !== void 0 ? I(!1, o, a, t, w(o, i.value, n)) : void 0,
-        defaultValue: i.defaultValue !== void 0 ? I(!1, o, a, t, w(o, i.defaultValue, n)) : void 0,
+        label: h,
+        value: i.value !== void 0 ? I(!1, o, a, t, w(o, i.value, r)) : void 0,
+        defaultValue: i.defaultValue !== void 0 ? I(!1, o, a, t, w(o, i.defaultValue, r)) : void 0,
         onChange: i.onChangeValue,
         disabled: i.disabled
-    }), [q, G] = s.useState(D !== null && D !== void 0 ? D : I(!1, o, a, t, w(o, Z, n))), u = D !== null && D !== void 0 ? D : q, $ = s.useRef(u), T = s.useCallback((e, r)=>{
-        const c = I(r, o, a, t, e);
-        $.current !== c && (H(n ? n[c] : c), G(c), $.current = c);
+    }), [q, G] = s.useState(D !== null && D !== void 0 ? D : I(!1, o, a, t, w(o, Z, r))), u = D !== null && D !== void 0 ? D : q, $ = s.useRef(u), T = s.useCallback((e, n)=>{
+        const c = I(n, o, a, t, e);
+        $.current !== c && (H(r ? r[c] : c), G(c), $.current = c);
     }, [
         o,
         a,
         t,
-        n,
+        r,
         H
     ]);
     s.useEffect(()=>{
@@ -116,30 +117,30 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
     }, [
         T
     ]);
-    const _ = s.useRef(null), m = s.useRef(null), N = s.useRef(null), J = s.useRef(null), [p, E] = s.useState(!1), [y, F] = s.useState(!1), [K, L] = s.useState(!1), { isIos: S } = de(), A = (e, r, c)=>{
+    const _ = s.useRef(null), m = s.useRef(null), N = s.useRef(null), J = s.useRef(null), [p, E] = s.useState(!1), [y, F] = s.useState(!1), [K, O] = s.useState(!1), { isIos: S } = de(), A = (e, n, c)=>{
         const d = e == null ? void 0 : e.getBoundingClientRect();
-        return !!d && d.left <= r && r <= d.right && d.top <= c && c <= d.bottom;
+        return !!d && d.left <= n && n <= d.right && d.top <= c && c <= d.bottom;
     }, l = fe(), C = S ? Ce : me, f = l ? Re : C, M = (e)=>{
-        const r = _.current;
-        if (r) {
-            const c = r.getBoundingClientRect().left + C / 2, d = r.getBoundingClientRect().right - C / 2;
+        const n = _.current;
+        if (n) {
+            const c = n.getBoundingClientRect().left + C / 2, d = n.getBoundingClientRect().right - C / 2;
             T((e - c) / (d - c), !0);
         }
     }, Q = (e)=>{
         V(e), M(e.clientX);
     }, W = (e)=>{
-        const r = m.current;
-        r && (r.onpointermove = Q, r.setPointerCapture(e.pointerId));
+        const n = m.current;
+        n && (n.onpointermove = Q, n.setPointerCapture(e.pointerId));
     }, ee = (e)=>{
-        const r = m.current;
-        r && (r.onpointermove = null, r.releasePointerCapture(e.pointerId));
-    }, k = `calc(${Ve(u, o, a)} * (100% - ${C}px) - ${(f - C) / 2}px)`, O = `calc(${k} + ${f / 2}px)`, X = /* @__PURE__ */ b("div", {
-        className: j(S ? oe : re, {
-            [ne]: !S && y && !p,
+        const n = m.current;
+        n && (n.onpointermove = null, n.releasePointerCapture(e.pointerId));
+    }, k = `calc(${Ve(u, o, a)} * (100% - ${C}px) - ${(f - C) / 2}px)`, X = `calc(${k} + ${f / 2}px)`, L = /* @__PURE__ */ g("div", {
+        className: j(S ? oe : ne, {
+            [re]: !S && y && !p,
             [ae]: !S && p
         })
     });
-    return /* @__PURE__ */ b(be, {
+    return /* @__PURE__ */ g(be, {
         paddingY: 8,
         dataAttributes: _object_spread({
             "component-name": "Slider"
@@ -153,16 +154,16 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
             },
             ref: N,
             onPointerDown: (e)=>{
-                const r = e.clientX, c = e.clientY;
-                !l && A(N.current, r, c) ? (A(m.current, r, c) || M(r), E(!0), W(e)) : V(e);
+                const n = e.clientX, c = e.clientY;
+                !l && A(N.current, n, c) ? (A(m.current, n, c) || M(n), E(!0), W(e)) : V(e);
             },
             onPointerUp: (e)=>{
                 l || (E(!1), ee(e));
             },
             onTouchStart: (e)=>{
                 if (V(e), l) {
-                    const r = e.nativeEvent.touches[0].clientX, c = e.nativeEvent.touches[0].clientY;
-                    A(m.current, r, c) || M(r), E(!0);
+                    const n = e.nativeEvent.touches[0].clientX, c = e.nativeEvent.touches[0].clientY;
+                    A(m.current, n, c) || M(n), E(!0);
                 }
             },
             onTouchEnd: (e)=>{
@@ -172,14 +173,14 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
                 V(e), l && M(e.nativeEvent.touches[0].clientX);
             },
             children: [
-                /* @__PURE__ */ b("div", {
+                /* @__PURE__ */ g("div", {
                     className: ie,
                     ref: _,
                     style: {
-                        background: `linear-gradient(to right, ${Y.colors.controlActivated} ${O}, ${Y.colors.barTrack} ${O}`
+                        background: `linear-gradient(to right, ${Y.colors.controlActivated} ${X}, ${Y.colors.barTrack} ${X}`
                     }
                 }),
-                /* @__PURE__ */ b("div", {
+                /* @__PURE__ */ g("div", {
                     className: le,
                     ref: m,
                     style: {
@@ -194,25 +195,25 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
                     onPointerLeave: ()=>{
                         l || F(!1);
                     },
-                    children: R ? /* @__PURE__ */ b(he, {
-                        target: X,
+                    children: R ? /* @__PURE__ */ g(he, {
+                        target: L,
                         open: p || K || y ? !0 : void 0,
-                        description: String(n ? n[u] : u),
+                        description: String(r ? r[u] : u),
                         centerContent: !0,
                         delay: !1
-                    }) : X
+                    }) : L
                 }),
-                /* @__PURE__ */ b("input", {
+                /* @__PURE__ */ g("input", {
                     type: "range",
                     min: o,
                     max: a,
                     ref: ve(B, J, x),
                     step: t,
-                    "aria-label": g,
+                    "aria-label": h,
                     "aria-labelledby": v,
-                    id: h,
+                    id: b,
                     className: ue,
-                    "aria-valuetext": String(n ? n[u] : u),
+                    "aria-valuetext": String(r ? r[u] : u),
                     style: {
                         left: k,
                         width: f,
@@ -223,10 +224,10 @@ const Re = 48, me = 20, Ce = 28, Ve = (n, t, o)=>t >= o ? 0 : (n - t) / (o - t),
                     disabled: U,
                     onChange: (e)=>T(+e.target.value, !1),
                     onFocus: ()=>{
-                        L(!0);
+                        O(!0);
                     },
                     onBlur: ()=>{
-                        L(!1);
+                        O(!1);
                     }
                 })
             ]