@mx-cartographer/experiences 7.2.12 → 7.2.13

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.2.13] - 11-24-2025
+
+- **FIXED** - interactive controls for budget and spending mini widgets
+
 ## [7.2.12] - 11-20-2025
 
 - **FIXED** - Accessibility label on split transaction amount input

package/dist/Donut-oaQFlbit.mjs

@@ -0,0 +1,86 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import b from "react";
+import { selectAll as m, interpolateString as x, arc as I } from "d3";
+import d from "@mui/material/Box";
+import { useTheme as S } from "@mui/material/styles";
+const k = 100, E = 140, v = 10, B = ({
+  data: u,
+  hoveredId: h,
+  onClick: s,
+  onMouseEnter: a,
+  onMouseLeave: l,
+  selectedId: i,
+  size: t = 300,
+  children: p
+}) => {
+  const f = S();
+  let r = 0;
+  const g = (o, n) => {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), s?.(n));
+  }, y = (o) => {
+    a?.(o);
+  }, D = (o) => {
+    l?.(o);
+  };
+  return b.useEffect(() => {
+    m(".arc-outer").transition("roll").duration(500).attrTween("transform", () => x("rotate(0)", "rotate(360)"));
+  }, []), /* @__PURE__ */ c(d, { height: t, position: "relative", width: t, children: [
+    /* @__PURE__ */ e(d, { height: "100%", width: "100%", children: p }),
+    /* @__PURE__ */ c(
+      "svg",
+      {
+        height: t,
+        style: { position: "absolute", top: 0, left: 0 },
+        viewBox: "-150 -150 300 300",
+        width: t,
+        children: [
+          /* @__PURE__ */ e("style", { children: `
+            .arc-outer:focus,
+            .arc-outer:focus-visible {
+              stroke: ${f.palette.primary.main};
+              stroke-width: 3;
+              stroke-opacity: 0.8;
+            }
+          ` }),
+          /* @__PURE__ */ e("g", { children: u.map((o) => {
+            const n = r;
+            r = r + 2 * Math.PI * (o.value / 100);
+            const w = r, R = I().cornerRadius(4)({
+              innerRadius: k,
+              outerRadius: E + (o.id === i || o.id === h ? v : 0),
+              startAngle: n,
+              endAngle: w,
+              padAngle: 0.025
+            });
+            return /* @__PURE__ */ e(
+              "path",
+              {
+                "aria-label": o.label || `Segment ${o.id}`,
+                "aria-pressed": o.id === i,
+                className: "arc-outer",
+                d: R,
+                fill: o.color,
+                onBlur: () => D(o.id),
+                onClick: () => s?.(o.id),
+                onFocus: () => y(o.id),
+                onKeyDown: (A) => g(A, o.id),
+                onMouseEnter: () => a?.(o.id),
+                onMouseLeave: () => l?.(o.id),
+                role: "button",
+                style: {
+                  cursor: "pointer",
+                  outline: "none"
+                },
+                tabIndex: 0
+              },
+              o.id
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}, j = B;
+export {
+  j as D
+};