@yewdiel21/motion-kit 0.15.0 → 0.16.0

package/README.md

@@ -172,3 +172,7 @@ import { PillButton, Toolbar, VoiceDots, Chart, PieChart } from '@yewdiel21/moti
 ```
 
 Los cambios de 0.15 también incluyen `select`, `add-to-cart` y `scroll-island`, que ya estaban implementados antes de esta continuación.
+
+## New in 0.16.0
+
+Pill bars, capacity tracks, spotlight/gradient fills, stacked capsules and smooth range curves extend Chart. RadialChart gains segmented gauges and percentage centers. AddToCart and ScrollIsland now have complete, interactive Vanilla/React playground demos; ScrollIsland also supports a persistent rail and AddToCart synchronizes controlled counts.

package/dist/auto/index.d.ts

@@ -1,6 +1,6 @@
-import { c as createJoinedCta, a as createImageZoom, b as createFontCycle, d as createThumbnailNav, e as createActionButton, f as createFilmHero, g as createEditorialReveal, h as createDrawer, i as createWeightHover, j as createSticker, k as createScrollDock, l as createLocalClock, m as createSpringCards, C as CurvedCarouselInstance, n as createPile, o as createWords, p as createFlow, q as createPop, r as createFitText, s as createStretchFooter, t as createRadialMenu, u as createTabs, v as createCounter, w as createReveal, x as createReflow, y as createSlotText, z as createSortable, A as createMaskText, B as createCascade, D as createTextRoll, E as createLetters, F as createParallax, G as createDepthGrid, H as createFrameZoom, I as createContrast, J as createMarquee, K as createCardDock, L as createSnapStrip, M as createFillText, T as TicketMenuOptions, N as TicketMenuInstance, O as createInfiniteReel, P as createRepelBento, Q as createRotator, R as createDragRuler, S as createDockPill } from '../reduced-6X_bns60.js';
-export { U as MK_HEAD_SCRIPT } from '../reduced-6X_bns60.js';
-import { c as createStudioDock, a as createTrailer, b as createQuantity, d as createPagination, e as createHoverCard, f as createInputOtp, g as createCalendar, h as createSlotPicker, i as createCreditCard, j as createCommandSearch, k as createHoldConfirm, l as createImagePreview, m as createNotificationBell, n as createPasswordStrength, o as createScratchCard, p as createStarRating, q as createAttachment, r as createSkeleton, s as createQuestionnaire, t as createCodeBlock, u as createContextMenu, v as createLinkPreview, w as createProgress, x as createRangeSlider, y as createChart, z as createColorSlider, A as createColorArea, B as createColorField, C as createColorPicker, D as createTimeField, E as createRangeCalendar, F as createDateRangePicker, G as createTooltip, H as createPopover, I as createLoadingButton, J as createBreadcrumb, K as createEmptyState, L as createStatCard, M as createChartTooltip, N as createMultiSelect, O as createTagInput, P as createDateTimePicker, Q as createFilterBuilder, R as createTimeline, S as createActivityFeed, T as createTreeView, U as createFileExplorer, V as createJsonViewer, W as createVirtualList, X as createResizablePanel, Y as createSplitView, Z as createDataTable, _ as createEditableTable, $ as createRichTextEditor, a0 as createSelect, a1 as createAddToCart, a2 as createScrollIsland } from '../reveal-BfyKKsw4.js';
+import { c as createJoinedCta, a as createImageZoom, b as createFontCycle, d as createThumbnailNav, e as createActionButton, f as createFilmHero, g as createEditorialReveal, h as createDrawer, i as createWeightHover, j as createSticker, k as createScrollDock, l as createLocalClock, m as createSpringCards, C as CurvedCarouselInstance, n as createPile, o as createWords, p as createFlow, q as createPop, r as createFitText, s as createStretchFooter, t as createRadialMenu, u as createTabs, v as createCounter, w as createReveal, x as createReflow, y as createSlotText, z as createSortable, A as createMaskText, B as createCascade, D as createTextRoll, E as createLetters, F as createParallax, G as createDepthGrid, H as createFrameZoom, I as createContrast, J as createMarquee, K as createCardDock, L as createSnapStrip, M as createFillText, T as TicketMenuOptions, N as TicketMenuInstance, O as createInfiniteReel, P as createRepelBento, Q as createRotator, R as createDragRuler, S as createDockPill } from '../reduced-DQwVXQYb.js';
+export { U as MK_HEAD_SCRIPT } from '../reduced-DQwVXQYb.js';
+import { c as createStudioDock, a as createTrailer, b as createQuantity, d as createPagination, e as createHoverCard, f as createInputOtp, g as createCalendar, h as createSlotPicker, i as createCreditCard, j as createCommandSearch, k as createHoldConfirm, l as createImagePreview, m as createNotificationBell, n as createPasswordStrength, o as createScratchCard, p as createStarRating, q as createAttachment, r as createSkeleton, s as createQuestionnaire, t as createCodeBlock, u as createContextMenu, v as createLinkPreview, w as createProgress, x as createRangeSlider, y as createChart, z as createColorSlider, A as createColorArea, B as createColorField, C as createColorPicker, D as createTimeField, E as createRangeCalendar, F as createDateRangePicker, G as createTooltip, H as createPopover, I as createLoadingButton, J as createBreadcrumb, K as createEmptyState, L as createStatCard, M as createChartTooltip, N as createMultiSelect, O as createTagInput, P as createDateTimePicker, Q as createFilterBuilder, R as createTimeline, S as createActivityFeed, T as createTreeView, U as createFileExplorer, V as createJsonViewer, W as createVirtualList, X as createResizablePanel, Y as createSplitView, Z as createDataTable, _ as createEditableTable, $ as createRichTextEditor, a0 as createSelect, a1 as createAddToCart, a2 as createScrollIsland } from '../reveal-DRpNO4KP.js';
 import { c as createLikeButton, a as createSwipeActions } from '../engine-QECQnGz1.js';
 import { I as Instance } from '../types-BkS_raL8.js';
 import 'gsap/SplitText';

package/dist/auto/index.js

@@ -44,7 +44,7 @@ import {
   createTicketMenu,
   createWeightHover,
   createWords
-} from "../chunk-6IRJYXJU.js";
+} from "../chunk-NFZIX3IA.js";
 import {
   ScrollTrigger,
   createActivityFeed,
@@ -107,7 +107,7 @@ import {
   createTrailer,
   createTreeView,
   createVirtualList
-} from "../chunk-A6QQCF6V.js";
+} from "../chunk-SDQ776LG.js";
 import "../chunk-34EZ7DF4.js";
 import {
   MK_HEAD_SCRIPT

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

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

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

@@ -27,7 +27,7 @@ import {
   startOfWeek,
   toDate,
   weekdayNames
-} from "./chunk-A6QQCF6V.js";
+} from "./chunk-SDQ776LG.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-RBEKR5UZ.js.map