@yewdiel21/motion-kit 0.15.0 → 0.16.0

package/dist/{chunk-A6QQCF6V.js → chunk-SDQ776LG.js}

@@ -6295,6 +6295,22 @@ function barPath(x, width, base, end, rounded) {
   if (!r) return `M${round(x)},${round(base)}V${round(end)}H${round(x + width)}V${round(base)}Z`;
   return `M${round(x)},${round(base)}V${round(end + dir * r)}Q${round(x)},${round(end)} ${round(x + r)},${round(end)}H${round(x + width - r)}Q${round(x + width)},${round(end)} ${round(x + width)},${round(end + dir * r)}V${round(base)}Z`;
 }
+function pillPath(x, width, a, b) {
+  const top = Math.min(a, b), bottom = Math.max(a, b);
+  const r = Math.min(width / 2, (bottom - top) / 2);
+  return `M${round(x + r)},${round(top)}H${round(x + width - r)}Q${round(x + width)},${round(top)} ${round(x + width)},${round(top + r)}V${round(bottom - r)}Q${round(x + width)},${round(bottom)} ${round(x + width - r)},${round(bottom)}H${round(x + r)}Q${round(x)},${round(bottom)} ${round(x)},${round(bottom - r)}V${round(top + r)}Q${round(x)},${round(top)} ${round(x + r)},${round(top)}Z`;
+}
+function linePath(points, smooth) {
+  if (!points.length) return "";
+  let path = `M${round(points[0][0])},${round(points[0][1])}`;
+  const slopes = points.slice(1).map((point, i) => (point[1] - points[i][1]) / (point[0] - points[i][0] || 1));
+  const tangents = points.map((_, i) => i === 0 ? slopes[0] : i === points.length - 1 ? slopes[i - 1] : slopes[i - 1] * slopes[i] <= 0 ? 0 : 2 * slopes[i - 1] * slopes[i] / (slopes[i - 1] + slopes[i]));
+  for (let i = 1; i < points.length; i++) {
+    const [x0, y0] = points[i - 1], [x, y] = points[i], dx = (x - x0) / 3;
+    path += smooth ? `C${round(x0 + dx)},${round(y0 + tangents[i - 1] * dx)} ${round(x - dx)},${round(y - tangents[i] * dx)} ${round(x)},${round(y)}` : `L${round(x)},${round(y)}`;
+  }
+  return path;
+}
 function modelOf(options) {
   const fromPoints = options.points?.length ? { labels: options.points.map((point) => String(point.label)), series: [{ name: options.label ?? "", values: options.points.map((point) => point.value) }] } : null;
   const labels = fromPoints?.labels ?? (options.labels ?? []).map(String);
@@ -6532,6 +6548,7 @@ function createChart(root, initial = {}) {
     const slot = plotW / n;
     const xs = model.labels.map((_, i) => bar ? left + slot * (i + 0.5) : n === 1 ? left + plotW / 2 : left + plotW * i / (n - 1));
     geometry = { width, height, top, bottom: top + plotH, left, right: width - right, xs, y, base };
+    shown4 = { values, lower, lo, hi, type: type(), stacked: stacked() };
     const grid = svg("g", { "data-mk-part": "grid" });
     if (!axis) {
       const zero = svg("line", { x1: left, x2: width - right, y1: round(base), y2: round(base) });
@@ -6570,10 +6587,53 @@ function createChart(root, initial = {}) {
     if (bar) {
       const barIndices = model.series.flatMap((_, index) => seriesType(index) === "bar" ? [index] : []);
       const groups = stacked() ? 1 : barIndices.length;
-      const barWidth = Math.max(2, Math.min(BAR_MAX, (slot * 0.62 - GAP3 * (groups - 1)) / groups));
+      const maxWidth = finite3(options.barWidth) ? Math.max(2, Math.min(96, options.barWidth)) : BAR_MAX;
+      const barWidth = Math.max(2, Math.min(maxWidth, (slot * 0.62 - GAP3 * (groups - 1)) / groups));
+      const pill2 = options.barStyle === "pill";
+      const trackLayer = svg("g", { "data-mk-part": "bar-tracks" });
+      canvas.append(trackLayer);
+      if (options.barFill && options.barFill !== "solid") {
+        model.series.forEach((series, k) => {
+          const gradient = svg("linearGradient", { id: `${uid2}-bar-${k}`, x1: 0, y1: 0, x2: 0, y2: 1 });
+          for (const [offset, opacity] of [["0", "1"], ["1", "0.4"]]) {
+            const stop2 = svg("stop", { offset });
+            stop2.style.stopColor = series.color;
+            stop2.style.stopOpacity = opacity;
+            gradient.append(stop2);
+          }
+          defs.append(gradient);
+        });
+        const hatch = svg("pattern", { id: `${uid2}-hatch`, patternUnits: "userSpaceOnUse", width: 6, height: 6, patternTransform: "rotate(35)" });
+        const ground = svg("rect", { width: 6, height: 6 });
+        ground.style.fill = "var(--mk-chart-track)";
+        const stripe = svg("line", { x1: 0, x2: 0, y1: 0, y2: 6 });
+        stripe.style.stroke = "var(--mk-chart-grid)";
+        stripe.style.strokeWidth = "2";
+        hatch.append(ground, stripe);
+        defs.append(hatch);
+      }
+      const fillBar = (path, k, index) => {
+        const fill = options.barFill && options.barFill !== "solid" ? `url(#${uid2}-bar-${k})` : model.series[k].color;
+        path.style.setProperty("--mk-bar-fill", fill);
+        path.style.fill = options.barFill === "spotlight" && index !== (selected ?? n - 1) ? `url(#${uid2}-hatch)` : fill;
+      };
+      const addTrack = (x) => {
+        if (!options.barTrack) return;
+        const path = svg("path", { d: pillPath(x, barWidth, top, base), "data-mk-part": "bar-track" });
+        trackLayer.append(path);
+      };
       const totalsLayer = svg("g", { "data-mk-part": "totals" });
       model.labels.forEach((_, i) => {
         if (stacked()) {
+          const clipId = `${uid2}-stack-${i}`;
+          if (pill2) {
+            const sum = totalsOf(values, i);
+            const clip = svg("clipPath", { id: clipId });
+            if (sum.up) clip.append(svg("path", { d: pillPath(xs[i] - barWidth / 2, barWidth, base, y(sum.up)) }));
+            if (sum.down) clip.append(svg("path", { d: pillPath(xs[i] - barWidth / 2, barWidth, base, y(sum.down)) }));
+            defs.append(clip);
+          }
+          addTrack(xs[i] - barWidth / 2);
           let up = 0;
           let down = 0;
           const outer = { up: -1, down: -1 };
@@ -6592,8 +6652,9 @@ function createChart(root, initial = {}) {
             const start = y(from) + (from !== 0 ? value > 0 ? -GAP3 : GAP3 : 0);
             const end = y(to);
             if (value > 0 && end >= start || value < 0 && end <= start) return;
-            const path = svg("path", { d: barPath(xs[i] - barWidth / 2, barWidth, start, end, k === (value > 0 ? outer.up : outer.down)), "data-mk-index": i, "data-mk-series": k });
-            path.style.fill = model.series[k].color;
+            const path = svg("path", { d: barPath(xs[i] - barWidth / 2, barWidth, start, end, !pill2 && k === (value > 0 ? outer.up : outer.down)), "data-mk-part": "bar", "data-mk-index": i, "data-mk-series": k });
+            if (pill2) path.setAttribute("clip-path", `url(#${clipId})`);
+            fillBar(path, k, i);
             marks.append(path);
           });
           if (slot >= 22 && up > 0) {
@@ -6607,10 +6668,11 @@ function createChart(root, initial = {}) {
           values.forEach((list3, k) => {
             if (seriesType(k) !== "bar") return;
             const value = list3[i];
-            if (!finite3(value) || value === 0) return;
             const x = xs[i] - groupWidth / 2 + barIndices.indexOf(k) * (barWidth + GAP3);
-            const path = svg("path", { d: barPath(x, barWidth, base, y(value), true), "data-mk-index": i, "data-mk-series": k });
-            path.style.fill = model.series[k].color;
+            addTrack(x);
+            if (!finite3(value) || value === 0) return;
+            const path = svg("path", { d: pill2 ? pillPath(x, barWidth, base, y(value)) : barPath(x, barWidth, base, y(value), true), "data-mk-part": "bar", "data-mk-index": i, "data-mk-series": k });
+            fillBar(path, k, i);
             marks.append(path);
           });
         }
@@ -6644,7 +6706,9 @@ function createChart(root, initial = {}) {
           defs.append(gradient);
           for (const points of runs2) {
             if (points.length < 2) continue;
-            const d = `M${points.map(([px, py]) => `${round(px)},${round(py)}`).join("L")}L${[...points].reverse().map(([px, , py]) => `${round(px)},${round(py)}`).join("L")}Z`;
+            const upper = linePath(points, options.curve === "smooth");
+            const bottom2 = linePath([...points].reverse().map(([px, , py]) => [px, py]), options.curve === "smooth");
+            const d = `${upper}${bottom2.replace(/^M/, "L")}Z`;
             const area = svg("path", { d, "data-mk-part": "area", "data-mk-series": k });
             area.style.fill = `url(#${uid2}-fill-${k})`;
             marks.append(area);
@@ -6657,7 +6721,7 @@ function createChart(root, initial = {}) {
             marks.append(dot);
             continue;
           }
-          const line = svg("path", { d: `M${points.map(([px, py]) => `${round(px)},${round(py)}`).join("L")}`, "data-mk-part": "line" });
+          const line = svg("path", { d: linePath(points, options.curve === "smooth"), "data-mk-part": "line" });
           line.style.stroke = series.color;
           const dotted = Boolean(series.dash) && Number(series.dash.trim().split(/[\s,]+/)[0]) <= 1;
           line.style.strokeWidth = dotted ? "2.5" : series.dash ? "1.5" : k === 0 ? "2.5" : "2";
@@ -6692,6 +6756,11 @@ function createChart(root, initial = {}) {
     cursor.replaceChildren();
     if (band) band.style.display = "none";
     for (const mark of canvas.querySelectorAll("[data-mk-index]")) mark.removeAttribute("data-mk-dim");
+    for (const mark of canvas.querySelectorAll('[data-mk-part="bar"]')) {
+      const index = Number(mark.dataset.mkIndex);
+      mark.toggleAttribute("data-mk-active", index === selected);
+      if (options.barFill === "spotlight") mark.style.fill = index === (selected ?? model.labels.length - 1) ? mark.style.getPropertyValue("--mk-bar-fill") : `url(#${uid2}-hatch)`;
+    }
     if (selected === null || !hasData()) {
       if (!tooltip.hidden && !reduced()) {
         gsap.killTweensOf(tooltip, "opacity,scale");
@@ -6716,6 +6785,24 @@ function createChart(root, initial = {}) {
       for (const mark of canvas.querySelectorAll("[data-mk-index]")) if (mark.getAttribute("data-mk-index") !== String(i)) mark.setAttribute("data-mk-dim", "");
       const { up, down } = totals(i);
       anchorY = stacked() ? geometry.y(up || down) : Math.min(...model.series.map((series) => finite3(series.values[i]) ? geometry.y(series.values[i]) : geometry.bottom));
+      if (options.barStyle === "pill") {
+        const amount = stacked() ? up + down : model.series[0]?.values[i];
+        if (finite3(amount)) {
+          const label = format(amount), width = Math.max(40, label.length * 7 + 18);
+          const bx = Math.max(0, Math.min(geometry.width - width, x - width / 2));
+          const by = Math.max(0, anchorY - 32);
+          const group = svg("g", { "data-mk-part": "bar-value" });
+          group.append(svg("rect", { x: round(bx), y: round(by), width, height: 24, rx: 12 }));
+          const text = svg("text", { x: round(bx + width / 2), y: round(by + 12), "text-anchor": "middle", "dominant-baseline": "middle" });
+          text.textContent = label;
+          group.append(text);
+          cursor.append(group);
+          const marker = svg("circle", { cx: round(x), cy: round(anchorY), r: 4, "data-mk-part": "marker" });
+          marker.style.fill = model.series[0]?.color ?? "var(--mk-text)";
+          cursor.append(marker);
+          if (fresh && !reduced()) keep(gsap.fromTo(group, { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.3, ease: EASE.pop }));
+        }
+      }
     } else {
       cursor.append(svg("line", { x1: round(x), x2: round(x), y1: geometry.top, y2: geometry.bottom, "data-mk-part": "guide" }));
       model.series.forEach((series) => {
@@ -6798,6 +6885,7 @@ function createChart(root, initial = {}) {
     glide?.kill();
     canvas.setAttribute("aria-label", describe());
     scope.attr(root, "data-mk-chart-type", type());
+    scope.attr(root, "data-mk-bar-style", options.barStyle ?? "rounded");
     renderTable();
     renderLegend();
     const ok = hasData();
@@ -6852,12 +6940,14 @@ function createChart(root, initial = {}) {
     }
     finish();
     if (type() === "bar") {
-      const state = { t: 0 };
+      const stagger = Math.min(0.045, 0.22 / Math.max(1, model.labels.length - 1));
+      const length = 0.7 + stagger * (model.labels.length - 1);
+      const state = { t: 0 }, ease = gsap.parseEase(EASE.swatch);
       glide = gsap.to(state, {
-        t: 1,
-        duration: 0.7,
-        ease: EASE.swatch,
-        onUpdate: () => paint(target.map((list3) => list3.map((value) => finite3(value) ? value * state.t : value)), domain.lo, domain.hi, domain.step),
+        t: length,
+        duration: length,
+        ease: "none",
+        onUpdate: () => paint(target.map((list3) => list3.map((value, i) => finite3(value) ? value * Math.max(0, ease(Math.min(1, Math.max(0, (state.t - i * stagger) / 0.7)))) : value)), domain.lo, domain.hi, domain.step),
         onComplete: () => {
           finish();
           settle();
@@ -20932,6 +21022,7 @@ function createScrollIsland(root, options = {}) {
   const idle2 = Number.isFinite(options.idle) ? Math.max(0, options.idle) : 900;
   const marked3 = page ? document.documentElement : root;
   scope.attr(marked3, "data-mk-scroll-island-host", "");
+  scope.attr(root, "data-mk-ready", "");
   const island = document.createElement("div");
   island.dataset.mkScrollIsland = "";
   island.dataset.mkState = "hidden";
@@ -20973,6 +21064,16 @@ function createScrollIsland(root, options = {}) {
   let section;
   let hideTimer;
   let dragging = null;
+  let scrollBehavior = null;
+  const restoreBehavior = () => {
+    if (!scrollBehavior) return;
+    const previous = scrollBehavior;
+    if (previous.value) scroller.style.setProperty("scroll-behavior", previous.value, previous.priority);
+    else scroller.style.removeProperty("scroll-behavior");
+    if (!previous.hadStyle && !scroller.getAttribute("style")) scroller.removeAttribute("style");
+    scrollBehavior = null;
+  };
+  scope.add(restoreBehavior);
   scope.add(() => clearTimeout(hideTimer));
   const headings = () => options.sections === false ? [] : [...(page ? document.body : root).querySelectorAll(options.sections ?? "h2, h3")];
   const currentSection = () => {
@@ -20987,7 +21088,7 @@ function createScrollIsland(root, options = {}) {
     const size = as === "island" ? ISLAND_HEIGHT : Math.max(MIN_BAR, Math.min(height, height * (scroller.clientHeight / Math.max(1, scroller.scrollHeight))));
     const top = (height - size) * progress();
     if (as !== "island") return { top, height: size, width: BAR_WIDTH, borderRadius: BAR_WIDTH / 2 };
-    return { top, height: size, width: Math.max(ISLAND_HEIGHT, content.scrollWidth + 28), borderRadius: size / 2 };
+    return { top, height: size, width: Math.min(Math.max(ISLAND_HEIGHT, track().right - track().left - INSET * 2), Math.max(ISLAND_HEIGHT, content.scrollWidth + 28)), borderRadius: size / 2 };
   };
   const place3 = () => {
     const box = track();
@@ -21024,7 +21125,7 @@ function createScrollIsland(root, options = {}) {
   const settleLater = () => {
     clearTimeout(hideTimer);
     hideTimer = setTimeout(() => {
-      if (state === "bar" && !dragging) go("hidden");
+      if (state === "bar" && !dragging && !options.persistent) go("hidden");
     }, idle2);
   };
   const onScroll = () => {
@@ -21073,6 +21174,8 @@ function createScrollIsland(root, options = {}) {
     if (state !== "island" || down.button !== 0) return;
     down.preventDefault();
     down.stopPropagation();
+    if (!scrollBehavior) scrollBehavior = { value: scroller.style.getPropertyValue("scroll-behavior"), priority: scroller.style.getPropertyPriority("scroll-behavior"), hadStyle: scroller.hasAttribute("style") };
+    scroller.style.setProperty("scroll-behavior", "auto", "important");
     const box = thumb.getBoundingClientRect();
     dragging = { id: down.pointerId, offset: down.clientY - box.top || ISLAND_HEIGHT / 2 };
     island.setAttribute("data-mk-dragging", "");
@@ -21084,6 +21187,7 @@ function createScrollIsland(root, options = {}) {
   const release = (event) => {
     if (!dragging || event.pointerId !== dragging.id) return;
     dragging = null;
+    restoreBehavior();
     island.removeAttribute("data-mk-dragging");
   };
   scope.on(window, "pointerup", release);
@@ -21098,7 +21202,15 @@ function createScrollIsland(root, options = {}) {
     scroller.scrollTo({ top: Math.round(Math.min(1, Math.max(0, ratio)) * range()), behavior: reduced() ? "auto" : "smooth" });
   });
   paintText();
-  go("hidden");
+  go(options.persistent ? "bar" : "hidden");
+  if (typeof ResizeObserver === "function") {
+    const observer = scope.observe(new ResizeObserver(() => {
+      paintText();
+      go(state, true);
+    }));
+    observer.observe(root);
+    for (const child of root.children) observer.observe(child);
+  }
   return {
     refresh: () => {
       paintText();
@@ -21330,4 +21442,4 @@ export {
   createAddToCart,
   createScrollIsland
 };
-//# sourceMappingURL=chunk-A6QQCF6V.js.map
+//# sourceMappingURL=chunk-SDQ776LG.js.map