@sesionario/blocks 1.32.0 → 1.33.1

package/dist/charts.js

@@ -292,6 +292,7 @@ function ChartProvider({
       orientation: value.orientation,
       stacked: value.stacked,
       stackOffsets: value.stackOffsets,
+      squareSnap: value.squareSnap,
       composedBarDataKeys: value.composedBarDataKeys,
       composedBarSize: value.composedBarSize,
       composedMaxBarSize: value.composedMaxBarSize,
@@ -337,6 +338,7 @@ function ChartProvider({
       value.orientation,
       value.stacked,
       value.stackOffsets,
+      value.squareSnap,
       value.composedBarDataKeys,
       value.composedBarSize,
       value.composedMaxBarSize,
@@ -3857,11 +3859,6 @@ function useAnimatedSeriesPath({
     [renderData, xAccessor, xScale, yScale, dataKey]
   );
   const prevTransitionSignatureRef = useRef(transitionSignature);
-  useEffect(() => {
-    if (!animatingRef.current) {
-      displayedPointsRef.current = targetPoints;
-    }
-  }, [targetPoints]);
   useEffect(() => {
     const shouldAnimate = enabled && !reducedMotion && chartPhase === "ready" && durationMs > 0 && renderData.length > 0;
     if (!shouldAnimate) {
@@ -3924,6 +3921,11 @@ function useAnimatedSeriesPath({
     dataKey,
     targetPoints
   ]);
+  useEffect(() => {
+    if (!animatingRef.current) {
+      displayedPointsRef.current = targetPoints;
+    }
+  }, [targetPoints]);
   const activePoints = animatedPoints ?? targetPoints;
   const pathD = useMemo(
     () => seriesPathFromPoints(activePoints, curve),
@@ -11993,7 +11995,6 @@ function PieCenterShell({
       return () => {
         cancelAnimationFrame(outerRaf);
         cancelAnimationFrame(innerRaf);
-        introStartedRef.current = false;
       };
     }
     setFlowTotal(centerValue);
@@ -12755,6 +12756,256 @@ function useRingHover() {
 function useRing() {
   return { ...useRingStable(), ...useRingHover() };
 }
+function generateArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius) {
+  const generator = arc({
+    innerRadius,
+    outerRadius,
+    cornerRadius
+  });
+  return generator({ startAngle, endAngle }) || "";
+}
+function ringHoverScale(isHovered, isPushedOut) {
+  if (isHovered) {
+    return 1.03;
+  }
+  if (isPushedOut) {
+    return 1.02;
+  }
+  return 1;
+}
+function RingProgressPath({
+  progressComplete,
+  progressPath,
+  animatedProgressPath,
+  color
+}) {
+  if (progressComplete) {
+    if (!progressPath) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("path", { d: progressPath, fill: color });
+  }
+  return /* @__PURE__ */ jsx(motion.path, { d: animatedProgressPath, fill: color });
+}
+var Ring = memo(function Ring2({
+  index,
+  color: colorProp,
+  animate: animate7 = true,
+  showGlow = true,
+  lineCap = "round"
+}) {
+  const {
+    data,
+    getColor,
+    getRingRadii,
+    startAngle,
+    endAngle,
+    enterTransition,
+    enterStaggerScale,
+    animationKey
+  } = useRingStable();
+  const { hoveredIndex, setHoveredIndex } = useRingHover();
+  const expandDelay = index * 0.08 * enterStaggerScale;
+  const expandProgress = useMountProgress(
+    enterTransition,
+    expandDelay,
+    `${animationKey}-expand-${index}`
+  );
+  const expandComplete = useEnterComplete(expandProgress);
+  const progressDelay = (0.6 + index * 0.1) * enterStaggerScale;
+  const progressMount = useMountProgress(
+    enterTransition,
+    progressDelay,
+    `${animationKey}-progress-${index}`
+  );
+  const progressComplete = useEnterComplete(progressMount);
+  const ringData = data[index];
+  const progress = ringData ? ringData.value / ringData.maxValue : 0;
+  const arcRange = endAngle - startAngle;
+  const animatedProgressPath = useTransform(progressMount, (v) => {
+    if (!ringData) {
+      return "";
+    }
+    const currentEndAngle = startAngle + arcRange * progress * v;
+    if (currentEndAngle <= startAngle + 0.01) {
+      return "";
+    }
+    const radii = getRingRadii(index);
+    const corner = lineCap === "round" ? (radii.outerRadius - radii.innerRadius) / 2 : 0;
+    return generateArcPath(
+      radii.innerRadius,
+      radii.outerRadius,
+      startAngle,
+      currentEndAngle,
+      corner
+    );
+  });
+  const enterScale = useTransform(expandProgress, [0, 1], [0, 1]);
+  const handleMouseEnter = useCallback(
+    () => setHoveredIndex(index),
+    [index, setHoveredIndex]
+  );
+  const handleMouseLeave = useCallback(
+    () => setHoveredIndex(null),
+    [setHoveredIndex]
+  );
+  if (!ringData) {
+    return null;
+  }
+  const { innerRadius, outerRadius } = getRingRadii(index);
+  const color = colorProp || getColor(index);
+  const isHovered = hoveredIndex === index;
+  const isFaded = hoveredIndex !== null && hoveredIndex !== index;
+  const isPushedOut = hoveredIndex !== null && hoveredIndex < index;
+  const cornerRadius = lineCap === "round" ? (outerRadius - innerRadius) / 2 : 0;
+  const bgPath = generateArcPath(
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    cornerRadius
+  );
+  const progressEndAngle = startAngle + arcRange * progress;
+  const progressPath = progressEndAngle <= startAngle + 0.01 ? "" : generateArcPath(
+    innerRadius,
+    outerRadius,
+    startAngle,
+    progressEndAngle,
+    cornerRadius
+  );
+  const hoverScale = ringHoverScale(isHovered, isPushedOut);
+  const layerOpacity = isFaded ? 0.35 : 1;
+  const enterDone = !animate7 || expandComplete && progressComplete;
+  const glowStyle = {
+    filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${color})` : "none"
+  };
+  const groupStyle = {
+    cursor: "pointer",
+    transformOrigin: "0px 0px"
+  };
+  if (enterDone) {
+    return /* @__PURE__ */ jsx(
+      motion.g,
+      {
+        animate: { scale: hoverScale, opacity: layerOpacity },
+        initial: { opacity: layerOpacity, scale: 1 },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        style: groupStyle,
+        transition: {
+          scale: { type: "spring", stiffness: 400, damping: 25 },
+          opacity: { duration: 0.15 }
+        },
+        children: /* @__PURE__ */ jsxs("g", { style: glowStyle, children: [
+          /* @__PURE__ */ jsx("path", { d: bgPath, fill: ringCssVars.ringBackground }),
+          progressPath ? /* @__PURE__ */ jsx("path", { d: progressPath, fill: color }) : null
+        ] })
+      }
+    );
+  }
+  if (!expandComplete) {
+    return /* @__PURE__ */ jsx(
+      motion.g,
+      {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        style: {
+          ...groupStyle,
+          scale: enterScale,
+          opacity: layerOpacity
+        },
+        children: /* @__PURE__ */ jsx("g", { style: glowStyle, children: /* @__PURE__ */ jsx("path", { d: bgPath, fill: ringCssVars.ringBackground }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    motion.g,
+    {
+      animate: { scale: hoverScale, opacity: layerOpacity },
+      initial: { opacity: layerOpacity, scale: 1 },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      style: groupStyle,
+      transition: {
+        scale: { type: "spring", stiffness: 400, damping: 25 },
+        opacity: { duration: 0.15 }
+      },
+      children: /* @__PURE__ */ jsxs("g", { style: glowStyle, children: [
+        /* @__PURE__ */ jsx("path", { d: bgPath, fill: ringCssVars.ringBackground }),
+        /* @__PURE__ */ jsx(
+          RingProgressPath,
+          {
+            animatedProgressPath,
+            color,
+            progressComplete,
+            progressPath
+          }
+        )
+      ] })
+    }
+  );
+});
+Ring.displayName = "Ring";
+function RingCenter({
+  defaultLabel = "Total",
+  formatOptions = defaultChartStatFlowFormat,
+  children,
+  className = "",
+  valueClassName = chartCenterValueClassName,
+  labelClassName = chartCenterLabelClassName,
+  prefix,
+  suffix
+}) {
+  const { data, totalValue, baseInnerRadius } = useRingStable();
+  const { hoveredIndex } = useRingHover();
+  const hoveredData = hoveredIndex === null ? null : data[hoveredIndex];
+  const displayValue = hoveredData ? hoveredData.value : totalValue;
+  const displayLabel = hoveredData ? hoveredData.label : defaultLabel;
+  const centerSize = baseInnerRadius * 2 - 16;
+  if (children && hoveredData) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          chartCenterContainerClassName,
+          "flex items-center justify-center",
+          className
+        ),
+        style: { width: centerSize, height: centerSize },
+        children: children({
+          value: displayValue,
+          label: displayLabel,
+          isHovered: hoveredIndex !== null,
+          data: hoveredData
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        chartCenterContainerClassName,
+        "flex flex-col items-center justify-center text-center",
+        className
+      ),
+      style: { width: centerSize, height: centerSize },
+      children: /* @__PURE__ */ jsx(
+        ChartStatFlow,
+        {
+          formatOptions,
+          label: displayLabel,
+          labelClassName,
+          prefix,
+          suffix,
+          value: displayValue,
+          valueClassName
+        }
+      )
+    }
+  );
+}
+RingCenter.displayName = "RingCenter";
 function generateRingArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius) {
   const generator = arc({
     innerRadius,
@@ -12764,10 +13015,10 @@ function generateRingArcPath(innerRadius, outerRadius, startAngle, endAngle, cor
   return generator({ startAngle, endAngle }) || "";
 }
 function isRing(child) {
-  return isValidElement(child) && typeof child.type === "function" && (child.type.displayName === "Ring" || child.type.name === "Ring");
+  return isValidElement(child) && child.type === Ring;
 }
 function isRingCenter(child) {
-  return isValidElement(child) && typeof child.type === "function" && (child.type.displayName === "RingCenter" || child.type.name === "RingCenter");
+  return isValidElement(child) && child.type === RingCenter;
 }
 function RingChartInner(props) {
   const size = Math.min(props.width, props.height);
@@ -13063,252 +13314,6 @@ function RingChart({
     }
   );
 }
-function generateArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius) {
-  const generator = arc({
-    innerRadius,
-    outerRadius,
-    cornerRadius
-  });
-  return generator({ startAngle, endAngle }) || "";
-}
-function ringHoverScale(isHovered, isPushedOut) {
-  if (isHovered) {
-    return 1.03;
-  }
-  if (isPushedOut) {
-    return 1.02;
-  }
-  return 1;
-}
-function RingProgressPath({
-  progressComplete,
-  progressPath,
-  animatedProgressPath,
-  color
-}) {
-  if (progressComplete) {
-    if (!progressPath) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx("path", { d: progressPath, fill: color });
-  }
-  return /* @__PURE__ */ jsx(motion.path, { d: animatedProgressPath, fill: color });
-}
-var Ring = memo(function Ring2({
-  index,
-  color: colorProp,
-  animate: animate7 = true,
-  showGlow = true,
-  lineCap = "round"
-}) {
-  const {
-    data,
-    getColor,
-    getRingRadii,
-    startAngle,
-    endAngle,
-    enterTransition,
-    enterStaggerScale,
-    animationKey
-  } = useRingStable();
-  const { hoveredIndex, setHoveredIndex } = useRingHover();
-  const expandDelay = index * 0.08 * enterStaggerScale;
-  const expandProgress = useMountProgress(
-    enterTransition,
-    expandDelay,
-    `${animationKey}-expand-${index}`
-  );
-  const expandComplete = useEnterComplete(expandProgress);
-  const progressDelay = (0.6 + index * 0.1) * enterStaggerScale;
-  const progressMount = useMountProgress(
-    enterTransition,
-    progressDelay,
-    `${animationKey}-progress-${index}`
-  );
-  const progressComplete = useEnterComplete(progressMount);
-  const ringData = data[index];
-  const progress = ringData ? ringData.value / ringData.maxValue : 0;
-  const arcRange = endAngle - startAngle;
-  const animatedProgressPath = useTransform(progressMount, (v) => {
-    if (!ringData) {
-      return "";
-    }
-    const currentEndAngle = startAngle + arcRange * progress * v;
-    if (currentEndAngle <= startAngle + 0.01) {
-      return "";
-    }
-    const radii = getRingRadii(index);
-    const corner = lineCap === "round" ? (radii.outerRadius - radii.innerRadius) / 2 : 0;
-    return generateArcPath(
-      radii.innerRadius,
-      radii.outerRadius,
-      startAngle,
-      currentEndAngle,
-      corner
-    );
-  });
-  const enterScale = useTransform(expandProgress, [0, 1], [0, 1]);
-  const handleMouseEnter = useCallback(
-    () => setHoveredIndex(index),
-    [index, setHoveredIndex]
-  );
-  const handleMouseLeave = useCallback(
-    () => setHoveredIndex(null),
-    [setHoveredIndex]
-  );
-  if (!ringData) {
-    return null;
-  }
-  const { innerRadius, outerRadius } = getRingRadii(index);
-  const color = colorProp || getColor(index);
-  const isHovered = hoveredIndex === index;
-  const isFaded = hoveredIndex !== null && hoveredIndex !== index;
-  const isPushedOut = hoveredIndex !== null && hoveredIndex < index;
-  const cornerRadius = lineCap === "round" ? (outerRadius - innerRadius) / 2 : 0;
-  const bgPath = generateArcPath(
-    innerRadius,
-    outerRadius,
-    startAngle,
-    endAngle,
-    cornerRadius
-  );
-  const progressEndAngle = startAngle + arcRange * progress;
-  const progressPath = progressEndAngle <= startAngle + 0.01 ? "" : generateArcPath(
-    innerRadius,
-    outerRadius,
-    startAngle,
-    progressEndAngle,
-    cornerRadius
-  );
-  const hoverScale = ringHoverScale(isHovered, isPushedOut);
-  const layerOpacity = isFaded ? 0.35 : 1;
-  const enterDone = !animate7 || expandComplete && progressComplete;
-  const groupStyle = {
-    cursor: "pointer",
-    transformOrigin: "0px 0px",
-    filter: showGlow && isHovered ? `drop-shadow(0 0 12px ${color})` : "none"
-  };
-  if (enterDone) {
-    return /* @__PURE__ */ jsxs(
-      motion.g,
-      {
-        animate: { scale: hoverScale, opacity: layerOpacity },
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        style: groupStyle,
-        transition: {
-          scale: { type: "spring", stiffness: 400, damping: 25 },
-          opacity: { duration: 0.15 }
-        },
-        children: [
-          /* @__PURE__ */ jsx("path", { d: bgPath, fill: ringCssVars.ringBackground }),
-          progressPath ? /* @__PURE__ */ jsx("path", { d: progressPath, fill: color }) : null
-        ]
-      }
-    );
-  }
-  if (!expandComplete) {
-    return /* @__PURE__ */ jsx(
-      motion.g,
-      {
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        style: {
-          ...groupStyle,
-          scale: enterScale,
-          opacity: layerOpacity
-        },
-        children: /* @__PURE__ */ jsx("path", { d: bgPath, fill: ringCssVars.ringBackground })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    motion.g,
-    {
-      animate: { scale: hoverScale, opacity: layerOpacity },
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      style: groupStyle,
-      transition: {
-        scale: { type: "spring", stiffness: 400, damping: 25 },
-        opacity: { duration: 0.15 }
-      },
-      children: [
-        /* @__PURE__ */ jsx("path", { d: bgPath, fill: ringCssVars.ringBackground }),
-        /* @__PURE__ */ jsx(
-          RingProgressPath,
-          {
-            animatedProgressPath,
-            color,
-            progressComplete,
-            progressPath
-          }
-        )
-      ]
-    }
-  );
-});
-Ring.displayName = "Ring";
-function RingCenter({
-  defaultLabel = "Total",
-  formatOptions = defaultChartStatFlowFormat,
-  children,
-  className = "",
-  valueClassName = chartCenterValueClassName,
-  labelClassName = chartCenterLabelClassName,
-  prefix,
-  suffix
-}) {
-  const { data, totalValue, baseInnerRadius } = useRingStable();
-  const { hoveredIndex } = useRingHover();
-  const hoveredData = hoveredIndex === null ? null : data[hoveredIndex];
-  const displayValue = hoveredData ? hoveredData.value : totalValue;
-  const displayLabel = hoveredData ? hoveredData.label : defaultLabel;
-  const centerSize = baseInnerRadius * 2 - 16;
-  if (children && hoveredData) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          chartCenterContainerClassName,
-          "flex items-center justify-center",
-          className
-        ),
-        style: { width: centerSize, height: centerSize },
-        children: children({
-          value: displayValue,
-          label: displayLabel,
-          isHovered: hoveredIndex !== null,
-          data: hoveredData
-        })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        chartCenterContainerClassName,
-        "flex flex-col items-center justify-center text-center",
-        className
-      ),
-      style: { width: centerSize, height: centerSize },
-      children: /* @__PURE__ */ jsx(
-        ChartStatFlow,
-        {
-          formatOptions,
-          label: displayLabel,
-          labelClassName,
-          prefix,
-          suffix,
-          value: displayValue,
-          valueClassName
-        }
-      )
-    }
-  );
-}
-RingCenter.displayName = "RingCenter";
 function Card({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",