@telefonica/mistica 16.5.0 → 16.6.0

package/dist-es/maybe-dismissable.js

@@ -1,33 +1,36 @@
 "use client";
-import { jsx as e, Fragment as c, jsxs as u } from "react/jsx-runtime";
+import { jsx as t, Fragment as c, jsxs as u } from "react/jsx-runtime";
 import * as o from "react";
 import b from "./generated/mistica-icons/icon-close-regular.js";
 import { useTheme as f } from "./hooks.js";
-import { IconButton as p } from "./icon-button.js";
-import { dismissableContainer as d, dismissableButton as x } from "./maybe-dismissable.css-mistica.js";
+import { IconButton as d } from "./icon-button.js";
+import { dismissableContainer as p, dismissableButton as x } from "./maybe-dismissable.css-mistica.js";
 import { ThemeVariant as h } from "./theme-variant-context.js";
 import { closeButtonLabel as B } from "./text-tokens.js";
 const a = /*#__PURE__*/ o.createContext(!1), M = ()=>o.useContext(a), C = (param)=>{
-    let { children: s, width: r, onClose: t, "aria-label": i, variant: m } = param;
+    let { children: e, width: r, onClose: s, "aria-label": i, variant: m } = param;
     const { texts: l, t: n } = f();
-    return t ? /* @__PURE__ */ u("section", {
-        className: d,
+    return s ? /* @__PURE__ */ u("section", {
+        className: p,
         "aria-label": i,
         style: {
             width: r || "100%",
             minHeight: "100%"
         },
         children: [
-            /* @__PURE__ */ e(a.Provider, {
+            /* @__PURE__ */ t(a.Provider, {
                 value: !0,
-                children: s
+                children: e
             }),
-            /* @__PURE__ */ e(h, {
+            /* @__PURE__ */ t(h, {
                 variant: m,
-                children: /* @__PURE__ */ e("div", {
+                children: /* @__PURE__ */ t("div", {
                     className: x,
-                    children: /* @__PURE__ */ e(p, {
-                        onPress: t,
+                    children: /* @__PURE__ */ t(d, {
+                        dataAttributes: {
+                            testid: "closeButton"
+                        },
+                        onPress: s,
                         "aria-label": l.closeButtonLabel || n(B),
                         small: !0,
                         Icon: b
@@ -35,8 +38,8 @@ const a = /*#__PURE__*/ o.createContext(!1), M = ()=>o.useContext(a), C = (param
                 })
             })
         ]
-    }) : /* @__PURE__ */ e(c, {
-        children: s
+    }) : /* @__PURE__ */ t(c, {
+        children: e
     });
 }, N = C;
 export { N as default, M as useIsDismissable };

package/dist-es/meter.js

@@ -0,0 +1,346 @@
+"use client";
+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 ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { jsx as o, jsxs as E, Fragment as ut } from "react/jsx-runtime";
+import * as m from "react";
+import { createElement as Et } from "react";
+import { vars as a } from "./skins/skin-contract.css-mistica.js";
+import Mt from "cubic-bezier";
+import { getPrefixedDataAttributes as bt } from "./utils/dom.js";
+import { useThemeVariant as Tt } from "./theme-variant-context.js";
+import { useTheme as vt, useElementDimensions as Rt } from "./hooks.js";
+import { meterTotalLabel as St, meterSectionLabel as Lt } from "./text-tokens.js";
+import { isRunningAcceptanceTest as _t } from "./utils/platform.js";
+const A = 100, J = A / 2, ft = A / 2, Q = 6, wt = 2, gt = 200, tt = 1e3, Nt = 1e3 / 60 / tt / 4, Ct = 100, D = 1e-4, R = "linear", Ot = "angular", r = "circular", pt = [
+    a.colors.controlActivated,
+    a.colors.warning,
+    a.colors.success,
+    a.colors.highlight,
+    a.colors.promo
+], Ft = [
+    a.colors.controlActivatedInverse,
+    a.colors.warning,
+    a.colors.success,
+    a.colors.highlight,
+    a.colors.promo
+], Ut = Mt(0.75, 0, 0.27, 1, Nt), W = (t, n, $)=>Math.min(Math.max(t, n), $), kt = (t, n, $, M)=>{
+    var O;
+    const s = [];
+    let b = 0, S = 0;
+    for(let h = 0; h < t.length; h++){
+        b += t[h], S += n[h];
+        const G = gt * (M ? h : t.length - 1 - h), V = W(($ - G) / tt, 0, 1), Z = W(Ut(V), 0, 1), X = ((O = s.at(-1)) == null ? void 0 : O.end) || 0, u = W(b + (S - b) * Z, 0, 1 - D);
+        s.push({
+            start: X,
+            end: u
+        });
+    }
+    return s;
+}, C = (param)=>{
+    let { x1: t, y1: n, x2: $, y2: M, radius: s, clockwise: b = 1, largeArchFlag: S = 0 } = param;
+    return s ? `M ${t} ${n} A ${s} ${s} 0 ${+S} ${+b} ${$} ${M}` : `M ${t} ${n} L ${$} ${M}`;
+}, Dt = (param)=>{
+    let { type: t = Ot, width: n = "100%", colors: $, values: M, reverse: s = !1, dataAttributes: b, "aria-hidden": S = !1, "aria-label": O, "aria-labelledby": h } = param;
+    const { borderRadii: G, t: V } = vt(), { ref: Z, width: X } = Rt(), u = parseInt(G.bar) !== 0, et = Tt(), q = et === "media", rt = et === "inverse", nt = $ || (rt || q ? Ft : pt), [p, ot] = m.useState(typeof n == "number" ? n : 0), z = p === 0 ? 1 : A / p, at = u ? Q / 2 : 0, Y = at * z, i = Q * z, c = t === R ? 0 : J - i / 2, T = wt * z, H = m.useId(), st = `marker-current-${H}`, it = `marker-start-${H}`, ct = `mask-last-segment-${H}`, lt = `mask-bar-track-${H}`, dt = m.useMemo(()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches !== !0 && !_t(), []), L = t === R ? A - Y * 2 : t === r ? Math.PI * 2 : Math.PI, l = t === R ? T / A : T / c / L, xt = t === R ? Q : t === r ? p : p / 2 + at, K = t === R ? i : t === r ? A : J + Y, At = q ? a.colors.inverse : rt ? a.colors.barTrackInverse : a.colors.barTrack, f = m.useMemo(()=>M.map((e)=>e / Ct), [
+        M
+    ]), P = m.useRef(Array.from({
+        length: f.length
+    }, ()=>s ? 1 : 0)), [_, $t] = m.useState(()=>f.map(()=>({
+                start: 0,
+                end: 0
+            })));
+    let v = -1, B = -1;
+    for(let e = 0; e < _.length; e++)_[e].end - _[e].start > D && (v < 0 && (v = e), B = e);
+    const d = _.at(-1);
+    m.useEffect(()=>{
+        ot(typeof n == "number" ? n : X);
+    }, [
+        n,
+        X
+    ]), m.useEffect(()=>{
+        let e;
+        const I = performance.now(), w = I + tt + gt * (f.length - 1);
+        let N = [];
+        const U = ()=>{
+            const x = performance.now();
+            N = kt(P.current, f, x - I, s), dt && x < w ? e = requestAnimationFrame(U) : (N = kt(P.current, f, w - I, s), P.current = f), $t(N);
+        };
+        return U(), ()=>{
+            cancelAnimationFrame(e), P.current = N.map((x)=>x.end - x.start);
+        };
+    }, [
+        c,
+        f,
+        t,
+        s,
+        dt
+    ]);
+    const k = m.useCallback((e)=>t === R ? Y + L * e : J - c * Math.cos(e * L), [
+        Y,
+        L,
+        c,
+        t
+    ]), g = m.useCallback((e)=>t === R ? i / 2 : ft - c * Math.sin(e * L), [
+        L,
+        c,
+        i,
+        t
+    ]), F = (e)=>nt[e % nt.length], mt = Math.round(((d == null ? void 0 : d.end) || 0) * 100), ht = V(St, f.length, mt) + " " + f.map((e, I)=>`${V(Lt, I + 1, Math.round(e * 100))}`).join(". ");
+    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread({
+        ref: Z,
+        style: {
+            width: n
+        },
+        role: "meter",
+        "aria-label": O || (h ? void 0 : ht),
+        "aria-labelledby": h,
+        "aria-valuenow": mt,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-live": "polite",
+        "aria-valuetext": ht,
+        "aria-hidden": S
+    }, bt(b, "Meter")), {
+        children: /* @__PURE__ */ E("svg", {
+            viewBox: `0 0 ${A} ${K}`,
+            style: {
+                width: p,
+                height: xt,
+                display: "block",
+                transform: `rotate(${t === r ? "90deg" : 0})`
+            },
+            "aria-hidden": "true",
+            children: [
+                /* @__PURE__ */ E("defs", {
+                    children: [
+                        u && /* @__PURE__ */ E(ut, {
+                            children: [
+                                /* @__PURE__ */ E("marker", {
+                                    id: st,
+                                    viewBox: "0 0 10 10",
+                                    markerWidth: 1,
+                                    markerHeight: 1,
+                                    orient: "auto",
+                                    refX: 5,
+                                    refY: 5,
+                                    children: [
+                                        /* @__PURE__ */ o("rect", {
+                                            x: 4,
+                                            y: 0,
+                                            width: 2,
+                                            height: 10,
+                                            fill: F(B)
+                                        }),
+                                        /* @__PURE__ */ o("path", {
+                                            d: C({
+                                                x1: 5,
+                                                y1: 0,
+                                                x2: 5,
+                                                y2: 10,
+                                                radius: 5
+                                            }),
+                                            fill: F(B)
+                                        })
+                                    ]
+                                }),
+                                /* @__PURE__ */ E("marker", {
+                                    id: it,
+                                    viewBox: "0 0 10 10",
+                                    markerWidth: 1,
+                                    markerHeight: 1,
+                                    orient: "auto",
+                                    refX: 5,
+                                    refY: 5,
+                                    children: [
+                                        /* @__PURE__ */ o("rect", {
+                                            x: 4,
+                                            y: 0,
+                                            width: 2,
+                                            height: 10,
+                                            fill: F(v)
+                                        }),
+                                        /* @__PURE__ */ o("path", {
+                                            d: C({
+                                                x1: 5,
+                                                y1: 0,
+                                                x2: 5,
+                                                y2: 10,
+                                                radius: 5,
+                                                clockwise: 0
+                                            }),
+                                            fill: F(v)
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /* @__PURE__ */ E("mask", {
+                            id: lt,
+                            maskUnits: "userSpaceOnUse",
+                            children: [
+                                /* @__PURE__ */ o("rect", {
+                                    x: 0,
+                                    y: 0,
+                                    width: A,
+                                    height: K,
+                                    fill: "white"
+                                }),
+                                v >= 0 && d && /* @__PURE__ */ E(ut, {
+                                    children: [
+                                        /* @__PURE__ */ o("path", {
+                                            stroke: "black",
+                                            fill: "none",
+                                            strokeWidth: i + T * 2,
+                                            strokeLinecap: t === r || !u ? "butt" : "round",
+                                            d: C({
+                                                x1: k(0),
+                                                y1: g(0),
+                                                x2: k(W(d.end + (u ? 0 : l), 0, 1 - D)),
+                                                y2: g(W(d.end + (u ? 0 : l), 0, 1 - D)),
+                                                radius: c,
+                                                largeArchFlag: t === r ? d.end >= 0.5 : 0
+                                            })
+                                        }),
+                                        t === r && u && // the circular type has butt line caps, so we need to add a circle to the end
+                                        /* @__PURE__ */ o("circle", {
+                                            cx: k(d.end),
+                                            cy: g(d.end),
+                                            r: i / 2 + T,
+                                            fill: "black"
+                                        }),
+                                        t === r && d.end <= 0.5 && // small patch to remove the circular mask when the last segment is too near to the start
+                                        /* @__PURE__ */ o("rect", {
+                                            x: 0,
+                                            y: ft + T,
+                                            width: i + T * 2,
+                                            height: i / 2 + T,
+                                            fill: "white"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        t === r && /* @__PURE__ */ E("mask", {
+                            id: ct,
+                            maskUnits: "userSpaceOnUse",
+                            children: [
+                                /* @__PURE__ */ o("rect", {
+                                    x: 0,
+                                    y: 0,
+                                    width: A,
+                                    height: K,
+                                    fill: "white"
+                                }),
+                                /* @__PURE__ */ o("path", {
+                                    stroke: "black",
+                                    strokeWidth: i,
+                                    fill: "none",
+                                    d: C({
+                                        x1: k(1 - l),
+                                        y1: g(1 - l),
+                                        x2: k(1),
+                                        y2: g(1),
+                                        radius: c
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /* @__PURE__ */ o("path", {
+                    stroke: At,
+                    opacity: q ? 0.5 : 1,
+                    fill: "none",
+                    strokeWidth: i,
+                    strokeLinecap: t === r || !u ? "butt" : "round",
+                    d: C({
+                        x1: k(0),
+                        y1: g(0),
+                        x2: k(1 - (t === r ? l : 0)),
+                        y2: g(1 - (t === r ? l : 0)),
+                        largeArchFlag: 1,
+                        radius: c
+                    }),
+                    mask: `url("#${lt}")`
+                }),
+                v >= 0 && [
+                    ..._
+                ].reverse().map((e, I)=>{
+                    const w = _.length - 1 - I, N = F(w), U = w === v, x = w === B, j = U || e.end - e.start < l ? e.start : e.start + l / 2, y = x || e.end - e.start < l ? e.end : e.end - l / 2;
+                    if (y - j < D) return null;
+                    const It = U && t !== r;
+                    return /* @__PURE__ */ o("path", {
+                        stroke: N,
+                        fill: "none",
+                        strokeWidth: i,
+                        strokeLinecap: "butt",
+                        markerEnd: x ? `url(#${st})` : void 0,
+                        markerStart: It ? `url(#${it})` : void 0,
+                        mask: x && t === r ? `url("#${ct}")` : void 0,
+                        d: C({
+                            x1: k(j),
+                            y1: g(j),
+                            x2: k(y),
+                            y2: g(y),
+                            largeArchFlag: t === r ? y - j >= 0.5 : 0,
+                            radius: c
+                        })
+                    }, I);
+                })
+            ]
+        })
+    }));
+}, Wt = (t)=>/* @__PURE__ */ /*#__PURE__*/ Et(Dt, _object_spread_props(_object_spread({}, t), {
+        key: `${t.type},${t.values.length},${t.reverse}`
+    })), Zt = Wt;
+export { Zt as default };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "16.5.0";
+const o = "16.6.0";
 export { o as PACKAGE_VERSION };

package/dist-es/sheet-common.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./sheet-common.css.ts.vanilla.css-mistica.js";
-var f = "pidemf6 _1y2v1nf3r", y = "pidemf4 _1y2v1nfhk _1y2v1nfla _1y2v1nflp _1y2v1nfm4", _ = "pidemf9 _1y2v1nf85 _1y2v1nfho _1y2v1nfhu", e = "pidemfq", i = "_1y2v1nfku _1y2v1nfia _1y2v1nfho _1y2v1nfhu", a = "pidemfl", r = "pidemf7", t = "_1y2v1nf50 _1y2v1nfik _1y2v1nfiv _1y2v1nfk8", o = "pidemfc _1y2v1nf7q _1y2v1nf8z _1y2v1nfhj _1y2v1nfkv _1y2v1nfj5 _1y2v1nfib _1y2v1nfho _1y2v1nfhx", h = "pidemff _1y2v1nf82 _1y2v1nf9b _1y2v1nfak _1y2v1nfbt _1y2v1nfhj _1y2v1nfkv _1y2v1nflp", m = "pidemfk _1y2v1nfhk _1y2v1nf43 _1y2v1nfkv _1y2v1nfla _1y2v1nflp _1y2v1nfm4", p = "pidemfp _1y2v1nfhm _1y2v1nfm4 _1y2v1nf3r", d = "pidemfn _1y2v1nfhm _1y2v1nfkv _1y2v1nf3r", l = 400;
-export { f as Sheet, y as SheetContainer, _ as SheetContent, e as bodyContent, i as children, a as closingOverlay, r as closingSheet, t as handle, o as handleContainer, h as modalCloseButton, m as overlay, p as stickyButtons, d as stickyTitle, l as transitionDuration };
+var f = "pidemf6 _1y2v1nf3r", y = "pidemf4 _1y2v1nfhk _1y2v1nfla _1y2v1nflp _1y2v1nfm4", _ = "pidemf9 _1y2v1nf85 _1y2v1nfho _1y2v1nfhu", e = "pidemfu", a = "_1y2v1nfku _1y2v1nfia _1y2v1nfho _1y2v1nfhu", r = "pidemfp", i = "pidemf7", t = "_1y2v1nf50 _1y2v1nfib _1y2v1nfis _1y2v1nfk8", h = "pidemfe _1y2v1nfhn", o = "_1y2v1nfik _1y2v1nfiv", m = "pidemfj _1y2v1nf82 _1y2v1nf9b _1y2v1nfak _1y2v1nfbt _1y2v1nfhj _1y2v1nfkv _1y2v1nflp", p = "pidemfo _1y2v1nfhk _1y2v1nf43 _1y2v1nfkv _1y2v1nfla _1y2v1nflp _1y2v1nfm4", d = "pidemfc _1y2v1nf7q _1y2v1nf8z _1y2v1nfhj _1y2v1nfkv _1y2v1nfj5 _1y2v1nfib _1y2v1nfho _1y2v1nfhx", l = "pidemft _1y2v1nfhm _1y2v1nfm4 _1y2v1nf3r", k = "pidemfr _1y2v1nfhm _1y2v1nfkv _1y2v1nf3r", s = 400;
+export { f as Sheet, y as SheetContainer, _ as SheetContent, e as bodyContent, a as children, r as closingOverlay, i as closingSheet, t as handleBar, h as handleContainer, o as handleTouchable, m as modalCloseButton, p as overlay, d as sheetTopDraggingArea, l as stickyButtons, k as stickyTitle, s as transitionDuration };