@telefonica/mistica 14.34.0 → 14.35.0

package/dist-es/slider.js

@@ -1,118 +1,238 @@
 "use client";
-import { jsx as c, jsxs as z } from "react/jsx-runtime";
-import * as r from "react";
-import { useTheme as B, useScreenSize as L } from "./hooks.js";
-import { sliderDisabled as W, container as X, targetContainer as _, rangeSlider as q, sliderVariant as F, sliderThumbVariant as G, progress as H } from "./slider.css-mistica.js";
-import V from "classnames";
-import J from "./tooltip.js";
-const K = (param)=>{
-    let { disabled: u, steps: t = 1, max: a = 100, min: l = 0, value: o, onChange: d, getStepArrayIndex: f, "arial-label": A, tooltip: $ } = param;
-    const { isIos: w } = B(), { isTabletOrSmaller: k } = L(), [i, g] = r.useState(l), [m, C] = r.useState(l), [b, M] = r.useState(a), [N, O] = r.useState(1), h = r.useRef(null), P = r.useMemo(()=>u ? "0.5" : "1", [
-        u
-    ]), j = 0, p = "50%", v = r.useMemo(()=>u && W, [
-        u
-    ]), y = r.useCallback(function() {
-        let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
-        if (!h.current) return;
-        const s = h.current.getBoundingClientRect(), n = Number(Math.abs(i - m) * 100 / (b - m)), S = 0.2 + (window.innerWidth - s.right) / 100 + (s.left - 0) / 100, x = e ? s.left - 10 - n * S : 10 - n * 0.2;
-        return `calc(${n}% + (${x}px))`;
-    }, [
-        i,
-        m,
-        b
-    ]), T = r.useCallback((e)=>{
-        let s = e;
-        return Array.isArray(t) && (s = t.reduce((n, S)=>Math.abs(S - e) < Math.abs(n - e) ? S : n)), s;
-    }, [
-        t
-    ]), D = r.useCallback(()=>{
-        Array.isArray(t) && t.sort((e, s)=>e - s);
-    }, [
-        t
-    ]), E = (e)=>{
-        g(e);
-    };
-    r.useEffect(()=>{
-        d == null || d(i), f == null || f(i);
-    }, [
-        d,
-        f,
-        i
-    ]), r.useEffect(()=>{
-        if (Array.isArray(t)) {
-            M(t.length - 1);
-            let e = 0;
-            o !== void 0 && (e = t.indexOf(T(o))), g(e);
-        } else {
-            C(l), M(a);
-            let e = l;
-            o !== void 0 && (l > o || o > a) && (e = a < o ? a : l), g(e), O(t);
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
         }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx as v, jsxs as ne } from "react/jsx-runtime";
+import * as i from "react";
+import { iosThumb as re, defaultThumb as ae, thumbHover as ce, thumbActive as se, container as ie, disabled as le, track as ue, thumbContainer as fe, input as de } from "./slider.css-mistica.js";
+import { vars as j } from "./skins/skin-contract.css-mistica.js";
+import { isTouchableDevice as he } from "./utils/environment.js";
+import x from "classnames";
+import { cancelEvent as p } from "./utils/dom.js";
+import { useTheme as ge } from "./hooks.js";
+import be from "./tooltip.js";
+import ve from "./box.js";
+import { useControlProps as Re } from "./form-context.js";
+import { combineRefs as me } from "./utils/common.js";
+const Ce = 48, Ve = 20, pe = 28, Pe = (n, t, c)=>t >= c ? 0 : (n - t) / (c - t), B = (n, t, c, l, a)=>{
+    const s = (m)=>{
+        if (m === void 0) return t;
+        const $ = n ? t + (c - t) * m : m;
+        return Math.max(t, Math.min(c, $));
+    };
+    if (t >= c) return t;
+    const b = s(a), P = t + Math.floor((b - t) / l) * l, R = t + Math.ceil((b - t) / l) * l;
+    return R <= c && R - b <= b - P ? R : P;
+}, D = (n, t, c)=>{
+    if (!c) return t;
+    if (t === void 0) return n;
+    let l = 0;
+    return c.forEach((a, s)=>{
+        c && Math.abs(a - t) <= Math.abs(c[l] - t) && (l = s);
+    }), l;
+}, Se = /*#__PURE__*/ i.forwardRef((_param, Z)=>{
+    var { values: n, step: t = 1, steps: c, getStepArrayIndex: l, min: a = 0, max: s = 100, "aria-label": b, "aria-labelledby": P, id: R, dataAttributes: m, tooltip: $ } = _param, f = _object_without_properties(_param, [
+        "values",
+        "step",
+        "steps",
+        "getStepArrayIndex",
+        "min",
+        "max",
+        "aria-label",
+        "aria-labelledby",
+        "id",
+        "dataAttributes",
+        "tooltip"
+    ]);
+    n && (n.length === 0 ? n = void 0 : s = n.length - 1), t = t | 0, t = t <= 0 ? 1 : t;
+    const { defaultValue: z, value: H, onChange: U, focusableRef: q, disabled: _, name: G } = Re({
+        name: f.name,
+        value: f.value !== void 0 ? B(!1, a, s, t, D(a, f.value, n)) : void 0,
+        defaultValue: f.defaultValue !== void 0 ? B(!1, a, s, t, D(a, f.defaultValue, n)) : void 0,
+        onChange: f.onChangeValue,
+        disabled: f.disabled
+    }), [J, K] = i.useState(H !== null && H !== void 0 ? H : B(!1, a, s, t, D(a, z, n))), d = H !== null && H !== void 0 ? H : J, y = i.useRef(d), S = i.useCallback((e, o)=>{
+        const r = B(o, a, s, t, e);
+        y.current !== r && (U(n ? n[r] : r), K(r), y.current = r);
     }, [
-        t,
         a,
-        l,
-        T,
-        o,
-        N,
-        D
+        s,
+        t,
+        n,
+        U
     ]);
-    const R = ()=>/* @__PURE__ */ c("div", {
-            className: _,
-            children: /* @__PURE__ */ z("div", {
-                ref: h,
-                style: {
-                    opacity: P,
-                    paddingTop: j
-                },
-                className: q,
-                children: [
-                    /* @__PURE__ */ c("input", {
-                        disabled: u,
-                        style: {
-                            top: p
-                        },
-                        className: V(F[w ? "ios" : "default"], v),
-                        "aria-label": "Slider",
-                        type: "range",
-                        min: m,
-                        max: b,
-                        value: i,
-                        step: N,
-                        onChange: (e)=>E(+e.target.value)
-                    }),
-                    /* @__PURE__ */ c("div", {
-                        style: {
-                            left: y(),
-                            top: p
-                        },
-                        className: V(G[w ? "ios" : "default"])
-                    }),
-                    /* @__PURE__ */ c("div", {
-                        className: H,
-                        style: {
-                            width: y(),
-                            top: p
-                        }
-                    })
-                ]
-            })
-        });
-    return /* @__PURE__ */ c("section", {
-        className: X,
-        "aria-label": A,
-        children: $ ? /* @__PURE__ */ c(J, {
-            description: Array.isArray(t) ? t[i].toString() : i.toString(),
-            width: k ? 42 : 45,
-            targetLabel: "",
-            textCenter: !0,
-            unstable_offsetX: y(!0),
-            targetStyle: {
-                width: "100%"
+    i.useEffect(()=>{
+        S(y.current, !1);
+    }, [
+        S
+    ]);
+    const N = i.useRef(null), C = i.useRef(null), F = i.useRef(null), Q = i.useRef(null), [E, T] = i.useState(!1), [A, L] = i.useState(!1), [W, O] = i.useState(!1), { isIos: I } = ge(), w = (e, o, r)=>{
+        const g = e == null ? void 0 : e.getBoundingClientRect();
+        return !!g && g.left <= o && o <= g.right && g.top <= r && r <= g.bottom;
+    }, u = he(), V = I ? pe : Ve, h = u ? Ce : V, M = (e)=>{
+        const o = N.current;
+        if (o) {
+            const r = o.getBoundingClientRect().left + V / 2, g = o.getBoundingClientRect().right - V / 2;
+            S((e - r) / (g - r), !0);
+        }
+    }, ee = (e)=>{
+        p(e), M(e.clientX);
+    }, te = (e)=>{
+        const o = C.current;
+        o && (o.onpointermove = ee, o.setPointerCapture(e.pointerId));
+    }, oe = (e)=>{
+        const o = C.current;
+        o && (o.onpointermove = null, o.releasePointerCapture(e.pointerId));
+    }, k = `calc(${Pe(d, a, s)} * (100% - ${V}px) - ${(h - V) / 2}px)`, X = `calc(${k} + ${h / 2}px)`, Y = /* @__PURE__ */ v("div", {
+        className: x(I ? re : ae, {
+            [ce]: !I && A && !E,
+            [se]: !I && E
+        })
+    });
+    return /* @__PURE__ */ v(ve, {
+        paddingY: 8,
+        dataAttributes: _object_spread({
+            "component-name": "Slider"
+        }, m),
+        children: /* @__PURE__ */ ne("div", {
+            className: x(ie, {
+                [le]: _
+            }),
+            style: {
+                height: h
+            },
+            ref: F,
+            onPointerDown: (e)=>{
+                const o = e.clientX, r = e.clientY;
+                !u && w(F.current, o, r) ? (w(C.current, o, r) || M(o), T(!0), te(e)) : p(e);
+            },
+            onPointerUp: (e)=>{
+                u || (T(!1), oe(e));
+            },
+            onTouchStart: (e)=>{
+                if (p(e), u) {
+                    const o = e.nativeEvent.touches[0].clientX, r = e.nativeEvent.touches[0].clientY;
+                    w(C.current, o, r) || M(o), T(!0);
+                }
+            },
+            onTouchEnd: (e)=>{
+                p(e), u && T(!1);
+            },
+            onTouchMove: (e)=>{
+                p(e), u && M(e.nativeEvent.touches[0].clientX);
             },
-            position: "top",
-            target: R()
-        }) : R()
+            children: [
+                /* @__PURE__ */ v("div", {
+                    className: ue,
+                    ref: N,
+                    style: {
+                        background: `linear-gradient(to right, ${j.colors.controlActivated} ${X}, ${j.colors.control} ${X}`
+                    }
+                }),
+                /* @__PURE__ */ v("div", {
+                    className: fe,
+                    ref: C,
+                    style: {
+                        cursor: E ? "grabbing" : A ? "grab" : "auto",
+                        left: k,
+                        width: h,
+                        height: h
+                    },
+                    onPointerEnter: ()=>{
+                        u || L(!0);
+                    },
+                    onPointerLeave: ()=>{
+                        u || L(!1);
+                    },
+                    children: $ ? /* @__PURE__ */ v(be, {
+                        target: Y,
+                        open: E || W || A ? !0 : void 0,
+                        description: String(n ? n[d] : d),
+                        centerContent: !0,
+                        delay: !1
+                    }) : Y
+                }),
+                /* @__PURE__ */ v("input", {
+                    type: "range",
+                    min: a,
+                    max: s,
+                    ref: me(Z, Q, q),
+                    step: t,
+                    "aria-label": b,
+                    "aria-labelledby": P,
+                    id: R,
+                    className: de,
+                    "aria-valuetext": String(n ? n[d] : d),
+                    style: {
+                        left: k,
+                        width: h,
+                        height: h
+                    },
+                    name: G,
+                    value: d,
+                    disabled: _,
+                    onChange: (e)=>S(+e.target.value, !1),
+                    onFocus: ()=>{
+                        O(!0);
+                    },
+                    onBlur: ()=>{
+                        O(!1);
+                    }
+                })
+            ]
+        })
     });
-}, ee = K;
-export { ee as default };
+}), Ue = Se;
+export { Ue as default };

package/dist-es/snackbar.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./snackbar.css.ts.vanilla.css-mistica.js";
 var b = 300, f = "o7bjb0a", _ = "_1y2v1nfba _1y2v1nfbm", a = {
-    centered: "o7bjb0e _1y2v1nfba _1y2v1nfb5 _1y2v1nfbp _1y2v1nfbj _1y2v1nffd",
-    topRight: "_1y2v1nfba _1y2v1nfb5 _1y2v1nfbp _1y2v1nfbj _1y2v1nffd _1y2v1nfej"
-}, r = "o7bjb0h _1y2v1nfc7 _1y2v1nfcn _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt", y = "o7bjb0b", o = "o7bjb01 _1y2v1nfbx _1y2v1nfba _1y2v1nfbj", p = "o7bjb02", t = "o7bjb04 _1y2v1nfb6 _1y2v1nfe3", e = "_1y2v1nf4k", j = "_1y2v1nf4l", i = "o7bjb07";
-export { b as TRANSITION_TIME_IN_MS, f as button, _ as content, a as dismissButton, r as dismissIcon, y as longButton, o as snackbar, p as snackbarOpen, t as wrapper, e as wrapperCritical, j as wrapperInfo, i as wrapperOpen };
+    centered: "o7bjb0e _1y2v1nfba _1y2v1nfb5 _1y2v1nfbp _1y2v1nfbj _1y2v1nffe",
+    topRight: "_1y2v1nfba _1y2v1nfb5 _1y2v1nfbp _1y2v1nfbj _1y2v1nffe _1y2v1nfek"
+}, r = "o7bjb0h _1y2v1nfc7 _1y2v1nfcn _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt", y = "o7bjb0b", o = "o7bjb01 _1y2v1nfbx _1y2v1nfba _1y2v1nfbj", p = "o7bjb02", e = "o7bjb04 _1y2v1nfb6 _1y2v1nfe3", t = "_1y2v1nf4k", j = "_1y2v1nf4l", i = "o7bjb07";
+export { b as TRANSITION_TIME_IN_MS, f as button, _ as content, a as dismissButton, r as dismissIcon, y as longButton, o as snackbar, p as snackbarOpen, e as wrapper, t as wrapperCritical, j as wrapperInfo, i as wrapperOpen };