@cronus-ui/ui 0.6.0

package/dist/charts/pattern-area.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { curveMonotoneX } from "@visx/curve";
+import { AreaClosed } from "@visx/shape";
+import { useChartStable } from "./chart-context.js";
+/**
+ * Filled area using an SVG pattern (`url(#id)`).
+ * Pair with `PatternLines` in `AreaChart` children and an `Area` with `fillOpacity={0}` for the stroke line.
+ */
+export function PatternArea({ dataKey, fill, curve = curveMonotoneX }) {
+    const { renderData, xScale, yScale, xAccessor } = useChartStable();
+    return (_jsx(AreaClosed, { curve: curve, data: renderData, fill: fill, x: (d) => xScale(xAccessor(d)) ?? 0, y: (d) => {
+            const v = d[dataKey];
+            return typeof v === "number" ? (yScale(v) ?? 0) : 0;
+        }, yScale: yScale }));
+}
+PatternArea.displayName = "PatternArea";
+export default PatternArea;
+//# sourceMappingURL=pattern-area.js.map

package/dist/charts/pattern-preset.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export declare const PATTERN_PRESET_IDS: readonly ["none", "diagonal", "horizontal", "vertical", "cross", "dots", "circles", "accent"];
+export type PatternPresetId = (typeof PATTERN_PRESET_IDS)[number];
+export interface PatternPresetOptions {
+    color?: string;
+    scale?: number;
+    strokeWidth?: number;
+    radius?: number;
+    complement?: boolean;
+    fill?: string;
+    /** Dot grid only — when false, render hollow dots (stroke only). Default: true */
+    dotFill?: boolean;
+    tileBackground?: string;
+}
+/** Presets rendered with @visx/pattern `PatternCircles`. */
+export declare function isCirclePattern(preset: PatternPresetId): boolean;
+/** @deprecated Use `isCirclePattern`. */
+export declare function isCirclesPattern(preset: PatternPresetId): boolean;
+export declare function patternPresetTileSize(preset: PatternPresetId, scale?: number): {
+    width: number;
+    height: number;
+    strokeWidth: number;
+};
+/** Renders a @visx/pattern definition node for the given preset. */
+export declare function renderPatternPreset(preset: PatternPresetId, id: string, options?: PatternPresetOptions): ReactNode;
+//# sourceMappingURL=pattern-preset.d.ts.map

package/dist/charts/pattern-preset.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PatternCircles, PatternLines } from "./visx-pattern.js";
+export const PATTERN_PRESET_IDS = [
+    "none",
+    "diagonal",
+    "horizontal",
+    "vertical",
+    "cross",
+    "dots",
+    "circles",
+    "accent",
+];
+/** Presets rendered with @visx/pattern `PatternCircles`. */
+export function isCirclePattern(preset) {
+    return preset === "circles" || preset === "dots";
+}
+/** @deprecated Use `isCirclePattern`. */
+export function isCirclesPattern(preset) {
+    return isCirclePattern(preset);
+}
+export function patternPresetTileSize(preset, scale = 1) {
+    let base = { width: 6, height: 6, strokeWidth: 1 };
+    if (preset === "dots") {
+        base = { width: 10, height: 10, strokeWidth: 0 };
+    }
+    else if (preset === "cross") {
+        base = { width: 8, height: 8, strokeWidth: 1 };
+    }
+    else if (preset === "circles") {
+        base = { width: 6, height: 6, strokeWidth: 1 };
+    }
+    return {
+        width: base.width * scale,
+        height: base.height * scale,
+        strokeWidth: base.strokeWidth * scale,
+    };
+}
+function renderPatternCircles(preset, _id, color, common, options, scale) {
+    const isDotGrid = preset === "dots";
+    const radius = options.radius ?? (isDotGrid ? Math.max(0.5, 1.5 * scale) : 2 * scale);
+    const dotFillEnabled = options.dotFill !== false;
+    if (isDotGrid) {
+        const dotFill = dotFillEnabled ? options.fill || color : undefined;
+        return (_jsx(PatternCircles, { ...common, complement: options.complement, fill: dotFill, radius: radius, stroke: dotFillEnabled && options.fill ? undefined : color, strokeWidth: dotFillEnabled && !options.fill ? (options.strokeWidth ?? 0) : (options.strokeWidth ?? 1) }));
+    }
+    return (_jsx(PatternCircles, { ...common, complement: options.complement, fill: options.fill || undefined, radius: radius, stroke: color, strokeWidth: options.strokeWidth ?? common.strokeWidth }));
+}
+/** Renders a @visx/pattern definition node for the given preset. */
+export function renderPatternPreset(preset, id, options = {}) {
+    if (preset === "none") {
+        return null;
+    }
+    const color = options.color ?? "var(--chart-1)";
+    const scale = options.scale ?? 1;
+    const tile = patternPresetTileSize(preset, scale);
+    const common = {
+        id,
+        height: tile.height,
+        width: tile.width,
+        strokeWidth: tile.strokeWidth,
+        ...(options.tileBackground ? { background: options.tileBackground } : {}),
+    };
+    if (preset === "dots" || preset === "circles") {
+        return renderPatternCircles(preset, id, color, common, options, scale);
+    }
+    const strokeWidth = options.strokeWidth ?? tile.strokeWidth;
+    switch (preset) {
+        case "diagonal":
+            return (_jsx(PatternLines, { ...common, orientation: ["diagonal"], stroke: color, strokeWidth: strokeWidth }));
+        case "horizontal":
+            return (_jsx(PatternLines, { ...common, orientation: ["horizontal"], stroke: color, strokeWidth: strokeWidth }));
+        case "vertical":
+            return (_jsx(PatternLines, { ...common, orientation: ["vertical"], stroke: color, strokeWidth: strokeWidth }));
+        case "cross":
+            return (_jsx(PatternLines, { ...common, orientation: ["diagonal", "diagonalRightToLeft"], stroke: color, strokeWidth: strokeWidth }));
+        case "accent":
+            return (_jsx(PatternLines, { ...common, orientation: ["diagonal"], stroke: "#e879f9", strokeWidth: strokeWidth }));
+        default:
+            return null;
+    }
+}
+//# sourceMappingURL=pattern-preset.js.map

package/dist/charts/pie-center-shell.d.ts

@@ -0,0 +1,24 @@
+import { type PieCenterProps } from "./pie-center.js";
+export type PieCenterShellProps = Omit<PieCenterProps, "children"> & {
+    /** Value shown with NumberFlow (same role as pie total when not hovering) */
+    centerValue: number;
+    /** Square reference size for pie context (matches `PieChart` `size`) */
+    contextSize: number;
+    /** Inner radius in px — must be > 0 so `PieCenter` renders */
+    innerRadiusPx: number;
+    /**
+     * When true (default), the first paint uses `0` then updates to `centerValue`
+     * on the next frame so NumberFlow can run an entrance transition. Subsequent
+     * `centerValue` updates animate as usual.
+     */
+    animateEntrance?: boolean;
+};
+/**
+ * Renders {@link PieCenter} with a minimal {@link PieProvider} so you can reuse
+ * the same center layout as a donut pie without mounting slices or a full {@link PieChart}.
+ */
+export declare function PieCenterShell({ centerValue, contextSize, innerRadiusPx, animateEntrance, ...pieCenterProps }: PieCenterShellProps): import("react").JSX.Element;
+export declare namespace PieCenterShell {
+    var displayName: string;
+}
+//# sourceMappingURL=pie-center-shell.d.ts.map

package/dist/charts/pie-center-shell.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pie as d3Pie } from "d3-shape";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { PieCenter } from "./pie-center.js";
+import { defaultPieColors, PieProvider, } from "./pie-context.js";
+const SHELL_HOVER_OFFSET = 10;
+/**
+ * Renders {@link PieCenter} with a minimal {@link PieProvider} so you can reuse
+ * the same center layout as a donut pie without mounting slices or a full {@link PieChart}.
+ */
+export function PieCenterShell({ centerValue, contextSize, innerRadiusPx, animateEntrance = true, ...pieCenterProps }) {
+    const containerRef = useRef(null);
+    const introStartedRef = useRef(false);
+    const [flowTotal, setFlowTotal] = useState(() => (animateEntrance ? 0 : centerValue));
+    useEffect(() => {
+        if (!animateEntrance) {
+            setFlowTotal(centerValue);
+            return;
+        }
+        if (!introStartedRef.current) {
+            introStartedRef.current = true;
+            setFlowTotal(0);
+            let innerRaf = 0;
+            const outerRaf = requestAnimationFrame(() => {
+                innerRaf = requestAnimationFrame(() => setFlowTotal(centerValue));
+            });
+            return () => {
+                cancelAnimationFrame(outerRaf);
+                cancelAnimationFrame(innerRaf);
+                introStartedRef.current = false;
+            };
+        }
+        setFlowTotal(centerValue);
+    }, [animateEntrance, centerValue]);
+    const data = useMemo(() => [{ label: "_pieCenterShell", value: Math.max(flowTotal, 0) }], [flowTotal]);
+    const totalValue = flowTotal;
+    const arcs = useMemo(() => {
+        const v = data[0]?.value ?? 0;
+        if (v > 0) {
+            const pieGenerator = d3Pie()
+                .value((d) => d.value)
+                .startAngle(-Math.PI / 2)
+                .endAngle((3 * Math.PI) / 2)
+                .padAngle(0)
+                .sort(null);
+            const computed = pieGenerator(data);
+            return computed.map((arc, index) => ({
+                data: arc.data,
+                index,
+                startAngle: arc.startAngle,
+                endAngle: arc.endAngle,
+                padAngle: arc.padAngle,
+                value: arc.value,
+            }));
+        }
+        const d0 = data[0];
+        if (!d0) {
+            return [];
+        }
+        return [
+            {
+                data: d0,
+                index: 0,
+                startAngle: -Math.PI / 2,
+                endAngle: (3 * Math.PI) / 2,
+                padAngle: 0,
+                value: 0,
+            },
+        ];
+    }, [data]);
+    const getColor = useCallback((index) => {
+        return defaultPieColors[index % defaultPieColors.length];
+    }, []);
+    const getFill = useCallback((index) => {
+        const item = data[index];
+        if (item?.fill) {
+            return item.fill;
+        }
+        return getColor(index);
+    }, [data, getColor]);
+    const center = contextSize / 2;
+    const outerRadius = center - SHELL_HOVER_OFFSET;
+    const contextValue = useMemo(() => ({
+        data,
+        arcs,
+        size: contextSize,
+        center,
+        outerRadius,
+        innerRadius: innerRadiusPx,
+        padAngle: 0,
+        cornerRadius: 0,
+        hoverOffset: SHELL_HOVER_OFFSET,
+        hoveredIndex: null,
+        setHoveredIndex: () => undefined,
+        animationKey: 0,
+        isLoaded: true,
+        enterStaggerScale: 1,
+        containerRef,
+        totalValue,
+        getColor,
+        getFill,
+        geometryScrubbing: false,
+        scrubSlicePaths: null,
+    }), [data, arcs, contextSize, center, outerRadius, innerRadiusPx, totalValue, getColor, getFill]);
+    return (_jsx(PieProvider, { value: contextValue, children: _jsx(PieCenter, { ...pieCenterProps }) }));
+}
+PieCenterShell.displayName = "PieCenterShell";
+//# sourceMappingURL=pie-center-shell.js.map

package/dist/charts/pie-center.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { type ChartStatFlowFormat } from "./chart-stat-flow.js";
+export interface PieCenterProps {
+    /** Label shown below the value. Default: "Total" when not hovering */
+    defaultLabel?: string;
+    /** Format options for NumberFlow. Default: standard notation */
+    formatOptions?: ChartStatFlowFormat;
+    /** Custom render function for complete control over center content */
+    children?: (props: {
+        value: number;
+        label: string;
+        isHovered: boolean;
+        data: {
+            label: string;
+            value: number;
+            color?: string;
+            fill?: string;
+        };
+    }) => ReactNode;
+    /** Additional class name for the container */
+    className?: string;
+    /** Class name for the value text. Scales with center size via container queries. */
+    valueClassName?: string;
+    /** Class name for the label text. Scales with center size via container queries. */
+    labelClassName?: string;
+    /** Prefix to show before the number (e.g., "$") */
+    prefix?: string;
+    /** Suffix to show after the number (e.g., "%") */
+    suffix?: string;
+}
+/**
+ * PieCenter displays content in the center of a donut/pie chart.
+ *
+ * This component renders as pure HTML (not inside SVG foreignObject) to avoid
+ * Safari's WebKit bug #23113 where HTML content with CSS transforms/opacity
+ * inside foreignObject renders at incorrect positions.
+ *
+ * The parent PieChart uses CSS Grid stacking to overlay this HTML content
+ * on top of the SVG slices.
+ */
+export declare function PieCenter({ defaultLabel, formatOptions, children, className, valueClassName, labelClassName, prefix, suffix, }: PieCenterProps): import("react").JSX.Element | null;
+export declare namespace PieCenter {
+    var displayName: string;
+}
+export default PieCenter;
+//# sourceMappingURL=pie-center.d.ts.map

package/dist/charts/pie-center.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { chartCenterContainerClassName, chartCenterLabelClassName, chartCenterValueClassName, } from "./chart-center-typography.js";
+import { ChartStatFlow, defaultChartStatFlowFormat, } from "./chart-stat-flow.js";
+import { usePieHover, usePieStable } from "./pie-context.js";
+/**
+ * PieCenter displays content in the center of a donut/pie chart.
+ *
+ * This component renders as pure HTML (not inside SVG foreignObject) to avoid
+ * Safari's WebKit bug #23113 where HTML content with CSS transforms/opacity
+ * inside foreignObject renders at incorrect positions.
+ *
+ * The parent PieChart uses CSS Grid stacking to overlay this HTML content
+ * on top of the SVG slices.
+ */
+export function PieCenter({ defaultLabel = "Total", formatOptions = defaultChartStatFlowFormat, children, className = "", valueClassName = chartCenterValueClassName, labelClassName = chartCenterLabelClassName, prefix, suffix, }) {
+    const { data, totalValue, innerRadius, geometryScrubbing } = usePieStable();
+    const { hoveredIndex } = usePieHover();
+    const effectiveHoveredIndex = geometryScrubbing ? null : hoveredIndex;
+    const hoveredData = effectiveHoveredIndex === null ? null : data[effectiveHoveredIndex];
+    const displayValue = hoveredData ? hoveredData.value : totalValue;
+    const displayLabel = hoveredData ? hoveredData.label : defaultLabel;
+    // Calculate center area size based on inner radius
+    // Leave some padding so text doesn't touch the inner edge
+    const centerSize = innerRadius * 2 - 16;
+    // Don't render if there's no inner radius (solid pie, not donut)
+    if (innerRadius <= 0) {
+        return null;
+    }
+    // If custom render function is provided, use it
+    if (children && hoveredData) {
+        return (_jsx("div", { className: cn(chartCenterContainerClassName, "flex items-center justify-center", className), style: { width: centerSize, height: centerSize }, children: children({
+                value: displayValue,
+                label: displayLabel,
+                isHovered: effectiveHoveredIndex !== null,
+                data: hoveredData,
+            }) }));
+    }
+    // Default center content with NumberFlow animations
+    // Now renders as pure HTML, avoiding Safari's foreignObject bugs
+    return (_jsx("div", { className: cn(chartCenterContainerClassName, "flex flex-col items-center justify-center text-center", className), style: { width: centerSize, height: centerSize }, children: _jsx(ChartStatFlow, { formatOptions: formatOptions, label: displayLabel, labelClassName: labelClassName, prefix: prefix, suffix: suffix, value: displayValue, valueClassName: valueClassName }) }));
+}
+PieCenter.displayName = "PieCenter";
+export default PieCenter;
+//# sourceMappingURL=pie-center.js.map

package/dist/charts/pie-chart.d.ts

@@ -0,0 +1,50 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+import { type PieData } from "./pie-context.js";
+/** Default hover offset in pixels */
+export declare const DEFAULT_HOVER_OFFSET = 10;
+export interface PieChartProps {
+    /** Data array - each item represents a slice */
+    data: PieData[];
+    /** Chart size in pixels. If not provided, uses parent container size */
+    size?: number;
+    /** Inner radius for donut charts. Default: 0 (solid pie) */
+    innerRadius?: number;
+    /** Padding angle between slices in radians. Default: 0 */
+    padAngle?: number;
+    /** Corner radius for rounded slice edges. Default: 0 */
+    cornerRadius?: number;
+    /** Start angle in radians. Default: -PI/2 (top) */
+    startAngle?: number;
+    /** End angle in radians. Default: 3*PI/2 (full circle from top) */
+    endAngle?: number;
+    /** Additional class name for the container */
+    className?: string;
+    /** Controlled hover state - index of hovered slice */
+    hoveredIndex?: number | null;
+    /** Callback when hover state changes */
+    onHoverChange?: (index: number | null) => void;
+    /**
+     * Hover offset in pixels for slice hover effects.
+     * This also determines the padding around the chart to prevent clipping.
+     * Default: 10
+     */
+    hoverOffset?: number;
+    /** Child components (PieSlice, PieCenter, patterns, gradients, etc.) */
+    children: ReactNode;
+    /** Framer Motion transition for slice enter animation */
+    enterTransition?: Transition;
+    /** Scales slice stagger delays (1 = default). */
+    enterStaggerScale?: number;
+    /**
+     * High-frequency geometry updates (e.g. studio NumberField scrub).
+     * Uses plain SVG paths instead of Motion `d` / spring hover morphing.
+     */
+    geometryScrubbing?: boolean;
+}
+export declare function PieChart({ data, size: fixedSize, innerRadius, padAngle, cornerRadius, startAngle, endAngle, className, hoveredIndex, onHoverChange, hoverOffset, enterTransition, enterStaggerScale, geometryScrubbing, children, }: PieChartProps): import("react").JSX.Element;
+export declare namespace PieChart {
+    var displayName: string;
+}
+export default PieChart;
+//# sourceMappingURL=pie-chart.d.ts.map

package/dist/charts/pie-chart.js

@@ -0,0 +1,248 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group } from "@visx/group";
+import { ParentSize } from "@visx/responsive";
+import { arc as arcGenerator } from "@visx/shape";
+import { pie as d3Pie } from "d3-shape";
+import { Children, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { defaultPieColors, PieProvider, } from "./pie-context.js";
+/** Default hover offset in pixels */
+export const DEFAULT_HOVER_OFFSET = 10;
+function generatePieArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius, padAngle) {
+    const generator = arcGenerator({
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        padAngle,
+    });
+    return generator({ startAngle, endAngle }) || "";
+}
+// Helper to check if a child is a PieCenter component
+function isPieCenter(child) {
+    return (isValidElement(child) &&
+        typeof child.type === "function" &&
+        (child.type.displayName === "PieCenter" ||
+            child.type.name === "PieCenter"));
+}
+function isPieSlice(child) {
+    return (isValidElement(child) &&
+        typeof child.type === "function" &&
+        (child.type.displayName === "PieSlice" ||
+            child.type.name === "PieSlice"));
+}
+// Helper to check if a component is a gradient or pattern definition
+function isDefsComponent(child) {
+    const displayName = child.type?.displayName ||
+        child.type?.name ||
+        "";
+    return (displayName.includes("Gradient") ||
+        displayName.includes("Pattern") ||
+        displayName === "LinearGradient" ||
+        displayName === "RadialGradient");
+}
+function PieChartInner(props) {
+    const size = Math.min(props.width, props.height);
+    if (size < 10) {
+        return null;
+    }
+    return _jsx(PieChartCore, { ...props });
+}
+const PieChartCore = memo(function PieChartCore({ width, height, data, innerRadius: innerRadiusProp, padAngle, cornerRadius, startAngle, endAngle, hoverOffset, children, containerRef, hoveredIndexProp, onHoverChange, enterTransition, enterStaggerScale, geometryScrubbing, }) {
+    const [internalHoveredIndex, setInternalHoveredIndex] = useState(null);
+    const [animationKey] = useState(0);
+    const [isLoaded, setIsLoaded] = useState(false);
+    // Use controlled or uncontrolled hover state
+    const isControlled = hoveredIndexProp !== undefined;
+    const hoveredIndex = isControlled ? hoveredIndexProp : internalHoveredIndex;
+    const setHoveredIndex = useCallback((index) => {
+        if (isControlled) {
+            onHoverChange?.(index);
+        }
+        else {
+            setInternalHoveredIndex(index);
+        }
+    }, [isControlled, onHoverChange]);
+    // Use the smaller dimension to ensure the chart fits
+    const size = Math.min(width, height);
+    const center = size / 2;
+    // Calculate radii with padding based on hover offset to prevent clipping
+    const padding = hoverOffset;
+    const outerRadius = center - padding;
+    const innerRadius = innerRadiusProp;
+    // Calculate total value
+    const totalValue = useMemo(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+    // Get color for a slice index
+    const getColor = useCallback((index) => {
+        const item = data[index];
+        if (item?.color) {
+            return item.color;
+        }
+        return defaultPieColors[index % defaultPieColors.length];
+    }, [data]);
+    // Get fill for a slice index (supports patterns/gradients)
+    const getFill = useCallback((index) => {
+        const item = data[index];
+        // Check for explicit fill (pattern/gradient URL)
+        if (item?.fill) {
+            return item.fill;
+        }
+        // Fall back to color
+        return getColor(index);
+    }, [data, getColor]);
+    // Compute arcs using d3-shape pie
+    const arcs = useMemo(() => {
+        const pieGenerator = d3Pie()
+            .value((d) => d.value)
+            .startAngle(startAngle)
+            .endAngle(endAngle)
+            .padAngle(padAngle)
+            .sort(null); // Maintain data order
+        const computed = pieGenerator(data);
+        return computed.map((arc, index) => ({
+            data: arc.data,
+            index,
+            startAngle: arc.startAngle,
+            endAngle: arc.endAngle,
+            padAngle: arc.padAngle,
+            value: arc.value,
+        }));
+    }, [data, startAngle, endAngle, padAngle]);
+    const scrubSlicePaths = useMemo(() => {
+        if (!geometryScrubbing) {
+            return null;
+        }
+        return arcs.map((arc) => generatePieArcPath(innerRadius, outerRadius, arc.startAngle, arc.endAngle, cornerRadius, arc.padAngle));
+    }, [geometryScrubbing, arcs, innerRadius, outerRadius, cornerRadius]);
+    const effectiveIsLoaded = geometryScrubbing || isLoaded;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: enterTransition
+    useEffect(() => {
+        if (geometryScrubbing) {
+            return;
+        }
+        setIsLoaded(false);
+        const timer = setTimeout(() => {
+            setIsLoaded(true);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [enterTransition, enterStaggerScale, geometryScrubbing]);
+    // Separate children into categories
+    const { svgChildren, centerChildren, defsChildren } = useMemo(() => {
+        const svgNodes = [];
+        const centerNodes = [];
+        const defsNodes = [];
+        Children.forEach(children, (child) => {
+            if (!isValidElement(child)) {
+                svgNodes.push(child);
+                return;
+            }
+            if (isPieCenter(child)) {
+                centerNodes.push(child);
+            }
+            else if (isDefsComponent(child)) {
+                defsNodes.push(child);
+            }
+            else if (geometryScrubbing && isPieSlice(child)) {
+                return;
+            }
+            else {
+                svgNodes.push(child);
+            }
+        });
+        return {
+            svgChildren: svgNodes,
+            centerChildren: centerNodes,
+            defsChildren: defsNodes,
+        };
+    }, [children, geometryScrubbing]);
+    const scrubSliceFills = useMemo(() => {
+        if (!(geometryScrubbing && scrubSlicePaths)) {
+            return null;
+        }
+        return scrubSlicePaths.map((_, index) => getFill(index));
+    }, [geometryScrubbing, scrubSlicePaths, getFill]);
+    const contextValue = useMemo(() => ({
+        data,
+        arcs,
+        size,
+        center,
+        outerRadius,
+        innerRadius,
+        padAngle,
+        cornerRadius,
+        hoverOffset,
+        hoveredIndex,
+        setHoveredIndex,
+        animationKey,
+        isLoaded: effectiveIsLoaded,
+        enterTransition,
+        enterStaggerScale,
+        containerRef,
+        totalValue,
+        getColor,
+        getFill,
+        geometryScrubbing,
+        scrubSlicePaths,
+    }), [
+        data,
+        arcs,
+        size,
+        center,
+        outerRadius,
+        innerRadius,
+        padAngle,
+        cornerRadius,
+        hoverOffset,
+        hoveredIndex,
+        setHoveredIndex,
+        animationKey,
+        effectiveIsLoaded,
+        enterTransition,
+        enterStaggerScale,
+        containerRef,
+        totalValue,
+        getColor,
+        getFill,
+        geometryScrubbing,
+        scrubSlicePaths,
+    ]);
+    // Use CSS Grid stacking to layer SVG and HTML content
+    // This avoids Safari's foreignObject rendering bugs
+    return (_jsx(PieProvider, { value: contextValue, children: _jsxs("div", { className: "grid", style: {
+                gridTemplateColumns: "1fr",
+                gridTemplateRows: "1fr",
+                width: size,
+                height: size,
+            }, children: [_jsxs("svg", { "aria-hidden": "true", height: size, style: { gridArea: "1 / 1", contain: "layout style paint" }, width: size, children: [defsChildren.length > 0 && _jsx("defs", { children: defsChildren }), _jsxs(Group, { left: center, top: center, children: [scrubSlicePaths && scrubSliceFills
+                                    ? scrubSlicePaths.map((d, index) => d ? (_jsx("path", { d: d, fill: scrubSliceFills[index], pointerEvents: "none" }, data[index]?.label ?? index)) : null)
+                                    : null, svgChildren] })] }), centerChildren.length > 0 && (_jsx("div", { className: "pointer-events-none flex items-center justify-center", style: { gridArea: "1 / 1" }, children: centerChildren }))] }) }));
+}, pieChartCorePropsEqual);
+function pieChartCorePropsEqual(prev, next) {
+    return (prev.width === next.width &&
+        prev.height === next.height &&
+        prev.data === next.data &&
+        prev.innerRadius === next.innerRadius &&
+        prev.padAngle === next.padAngle &&
+        prev.cornerRadius === next.cornerRadius &&
+        prev.startAngle === next.startAngle &&
+        prev.endAngle === next.endAngle &&
+        prev.hoverOffset === next.hoverOffset &&
+        prev.hoveredIndexProp === next.hoveredIndexProp &&
+        prev.onHoverChange === next.onHoverChange &&
+        prev.enterTransition === next.enterTransition &&
+        prev.enterStaggerScale === next.enterStaggerScale &&
+        prev.geometryScrubbing === next.geometryScrubbing &&
+        prev.children === next.children);
+}
+export function PieChart({ data, size: fixedSize, innerRadius = 0, padAngle = 0, cornerRadius = 0, startAngle = -Math.PI / 2, endAngle = (3 * Math.PI) / 2, className = "", hoveredIndex, onHoverChange, hoverOffset = DEFAULT_HOVER_OFFSET, enterTransition, enterStaggerScale = 1, geometryScrubbing = false, children, }) {
+    const containerRef = useRef(null);
+    // If fixed size is provided, use it directly
+    if (fixedSize) {
+        return (_jsx("div", { "data-slot": "pie-chart", className: cn("relative flex items-center justify-center", className), ref: containerRef, style: { width: fixedSize, height: fixedSize }, children: _jsx(PieChartInner, { containerRef: containerRef, cornerRadius: cornerRadius, data: data, endAngle: endAngle, enterStaggerScale: enterStaggerScale, enterTransition: enterTransition, geometryScrubbing: geometryScrubbing, height: fixedSize, hoveredIndexProp: hoveredIndex, hoverOffset: hoverOffset, innerRadius: innerRadius, onHoverChange: onHoverChange, padAngle: padAngle, startAngle: startAngle, width: fixedSize, children: children }) }));
+    }
+    // Otherwise use ParentSize for responsive sizing
+    return (_jsx("div", { className: cn("relative aspect-square w-full", className), ref: containerRef, children: _jsx(ParentSize, { debounceTime: 10, children: ({ width, height }) => (_jsx(PieChartInner, { containerRef: containerRef, cornerRadius: cornerRadius, data: data, endAngle: endAngle, enterStaggerScale: enterStaggerScale, enterTransition: enterTransition, geometryScrubbing: geometryScrubbing, height: height, hoveredIndexProp: hoveredIndex, hoverOffset: hoverOffset, innerRadius: innerRadius, onHoverChange: onHoverChange, padAngle: padAngle, startAngle: startAngle, width: width, children: children })) }) }));
+}
+PieChart.displayName = "PieChart";
+export default PieChart;
+//# sourceMappingURL=pie-chart.js.map