@yewdiel21/motion-kit 0.15.0 → 0.17.0

package/dist/{chunk-6IRJYXJU.js → chunk-BZLMCHUD.js}

@@ -18,7 +18,7 @@ import {
   slideIndicator,
   splitGraphemes,
   takeMovement
-} from "./chunk-A6QQCF6V.js";
+} from "./chunk-7IQTMF7Y.js";
 import {
   clamp,
   damp,
@@ -4491,4 +4491,4 @@ export {
   createScrollDock,
   createLocalClock
 };
-//# sourceMappingURL=chunk-6IRJYXJU.js.map
+//# sourceMappingURL=chunk-BZLMCHUD.js.map

package/dist/{chunk-JXRS3OEA.js → chunk-VJFPTLAK.js}

@@ -27,7 +27,7 @@ import {
   startOfWeek,
   toDate,
   weekdayNames
-} from "./chunk-A6QQCF6V.js";
+} from "./chunk-7IQTMF7Y.js";
 import {
   THEMES,
   THEME_EVENT,
@@ -2734,6 +2734,7 @@ function createRadialChart(root, initial = {}) {
   const percent = (ring) => new Intl.NumberFormat(void 0, { style: "percent", maximumFractionDigits: 0 }).format(ring.value / ring.max);
   const sweep = () => Math.min(360, Math.max(90, finite2(options.sweep) ? options.sweep : 360)) * Math.PI / 180;
   const startAngle = () => -sweep() / 2 + (sweep() >= Math.PI * 2 - 1e-6 ? Math.PI : 0);
+  const segments = () => finite2(options.segments) ? Math.max(0, Math.min(80, Math.round(options.segments))) : 0;
   let geometry = { size: 240, cx: 120, cy: 120, radii: [], thickness: 12 };
   let arcs = [];
   let tracks = [];
@@ -2750,16 +2751,33 @@ function createRadialChart(root, initial = {}) {
     const thickness = finite2(options.thickness) ? options.thickness : Math.max(4, Math.min(16, fit));
     const spacing = thickness * 1.35;
     geometry = { size, cx: size / 2, cy: size / 2, thickness, radii: model.map((_, i) => outer - thickness / 2 - i * spacing) };
-    canvas.setAttribute("viewBox", `0 0 ${size} ${size}`);
+    const half = sweep() <= Math.PI + 1e-6;
+    const height = half ? size / 2 + 54 : size;
+    canvas.setAttribute("viewBox", `0 0 ${size} ${height}`);
     canvas.setAttribute("width", String(size));
-    canvas.setAttribute("height", String(size));
+    canvas.setAttribute("height", String(height));
     plot.style.setProperty("--mk-radial-size", `${size}px`);
     plot.style.setProperty("--mk-radial-thickness", `${thickness}px`);
+    plot.style.setProperty("--mk-radial-center-y", half ? `${size / 2}px` : "50%");
+    plot.style.setProperty("--mk-radial-center-width", n === 1 ? "0.68" : "0.36");
   };
   scope.add(() => {
     plot.style.removeProperty("--mk-radial-size");
     plot.style.removeProperty("--mk-radial-thickness");
+    plot.style.removeProperty("--mk-radial-center-y");
+    plot.style.removeProperty("--mk-radial-center-width");
   });
+  const segmentedPath = (radius, share) => {
+    const count = segments(), step = sweep() / count, a0 = startAngle();
+    const gap = Math.min(step * 0.3, 4 / Math.max(1, radius));
+    const limit = a0 + sweep() * Math.min(1, Math.max(0, share));
+    const outer = radius + geometry.thickness / 2 - 1, inner = Math.max(0, radius - geometry.thickness / 2 + 1);
+    return Array.from({ length: count }, (_, index) => {
+      const from = a0 + index * step + gap / 2;
+      const to = Math.min(a0 + (index + 1) * step - gap / 2, limit);
+      return to > from ? arcPath(geometry.cx, geometry.cy, outer, inner, from, to) : "";
+    }).join("");
+  };
   const build = () => {
     canvas.replaceChildren();
     const { cx, cy, radii } = geometry;
@@ -2767,13 +2785,14 @@ function createRadialChart(root, initial = {}) {
     const back = svg2("g", { "data-mk-part": "tracks" });
     const front = svg2("g", { "data-mk-part": "series" });
     tracks = model.map((_, i) => {
-      const track = svg2("path", { d: strokeArc(cx, cy, radii[i], a0, a0 + sweep()), "data-mk-index": i });
+      const track = svg2("path", { d: segments() ? segmentedPath(radii[i], 1) : strokeArc(cx, cy, radii[i], a0, a0 + sweep()), "data-mk-index": i });
       back.append(track);
       return track;
     });
     arcs = model.map((ring, i) => {
       const arc = svg2("path", { "data-mk-index": i, "data-mk-part": "ring" });
       arc.style.stroke = ring.color;
+      if (segments()) arc.style.fill = ring.color;
       front.append(arc);
       return arc;
     });
@@ -2785,13 +2804,15 @@ function createRadialChart(root, initial = {}) {
     const a0 = startAngle();
     arcs.forEach((arc, i) => {
       const share = Math.min(1, Math.max(0, (values[i] ?? 0) / model[i].max));
-      arc.setAttribute("d", share > 1e-3 ? strokeArc(cx, cy, radii[i], a0, a0 + sweep() * share) : "");
+      arc.setAttribute("d", share > 1e-3 ? segments() ? segmentedPath(radii[i], share) : strokeArc(cx, cy, radii[i], a0, a0 + sweep() * share) : "");
     });
   };
   const paintCenter = (animate) => {
     center.hidden = !model.length;
     const ring = selected === null ? null : model[selected];
-    const text = ring ? format(ring.value) : format(total());
+    const denominator = ring ? ring.max : model.reduce((sum, each) => sum + each.max, 0);
+    const value = ring ? ring.value : total();
+    const text = options.center === "percent" ? new Intl.NumberFormat(void 0, { style: "percent", maximumFractionDigits: 1 }).format(value / (denominator || 1)) : format(value);
     const caption = ring ? `${ring.label} \xB7 ${percent(ring)}` : options.totalLabel ?? "Total";
     const changed = centerLabel.textContent !== caption;
     if (centerValue.textContent !== text) {
@@ -2814,6 +2835,7 @@ function createRadialChart(root, initial = {}) {
   };
   const draw = (animate) => {
     glide?.kill();
+    scope.attr(root, "data-mk-segmented", segments() ? "" : null);
     const name = options.label ?? "Gr\xE1fica radial";
     canvas.setAttribute("aria-label", model.length ? `${name}. ${model.length} anillos, total ${format(total())}. Usa las flechas para recorrerlos.` : `${name}: ${options.emptyLabel ?? "sin datos"}`);
     frame.fillTable(name, ["Anillo", "Valor", "Meta", "Avance"], model.map((ring) => [ring.label, format(ring.value), format(ring.max), percent(ring)]));
@@ -3635,4 +3657,4 @@ export {
   createHeatmapChart,
   createOrbitMenu
 };
-//# sourceMappingURL=chunk-JXRS3OEA.js.map
+//# sourceMappingURL=chunk-VJFPTLAK.js.map