@cronus-ui/ui 0.6.0

package/dist/charts/reference-area.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { useId, useLayoutEffect, useMemo } from "react";
+import { chartCssVars, useChartStable, useYScale } from "./chart-context.js";
+import { renderPatternPreset } from "./pattern-preset.js";
+import { computeReferenceAreaRect, } from "./reference-area-geometry.js";
+import { useReferenceAreaRegistration } from "./reference-area-registration-context.js";
+import { normalizeYAxisId } from "./y-axis-scales.js";
+import { isReferenceAreaVisiblePhase } from "./y-domain-utils.js";
+const DEFAULT_FILL = "color-mix(in oklch, var(--chart-foreground-muted) 12%, transparent)";
+const ENTER_FADE_MS = 420;
+function clampFadeLength(length) {
+    return Math.min(45, Math.max(0, length));
+}
+function bracketMarkerPath(centerX, edgeY, size, direction) {
+    const half = size / 2;
+    if (direction === "down") {
+        return `M ${centerX - half} ${edgeY} L ${centerX + half} ${edgeY} L ${centerX} ${edgeY + size} Z`;
+    }
+    return `M ${centerX - half} ${edgeY} L ${centerX + half} ${edgeY} L ${centerX} ${edgeY - size} Z`;
+}
+export function ReferenceArea({ y1, y2, x1, x2, yAxisId, fill = DEFAULT_FILL, fillOpacity = 1, pattern = "none", patternColor = chartCssVars.foregroundMuted, patternScale = 1, patternStrokeWidth, patternRadius, patternComplement, patternFill, patternDotFill, patternTileBackground, stroke = chartCssVars.foregroundMuted, strokeWidth = 1, strokeStyle = "dashed", strokeDasharray = "4,4", fadeEdges = true, fadeEdgesLength = 10, axisLabelColor, showMarkers = false, markerColor = "var(--chart-1)", markerSize = 6, ifOverflow = "hidden", className, }) {
+    const { innerWidth, innerHeight, xScale, chartPhase, enterTransition } = useChartStable();
+    const yScale = useYScale(yAxisId);
+    const uniqueId = useId().replace(/:/g, "");
+    const registration = useReferenceAreaRegistration();
+    useLayoutEffect(() => {
+        if (!registration) {
+            return;
+        }
+        registration.registerReferenceArea(uniqueId, {
+            yAxisId: normalizeYAxisId(yAxisId),
+            y1,
+            y2,
+            axisLabelColor,
+        });
+        return () => registration.unregisterReferenceArea(uniqueId);
+    }, [registration, uniqueId, yAxisId, y1, y2, axisLabelColor]);
+    const patternId = `chart-reference-area-pattern-${uniqueId}`;
+    const hMaskId = `chart-reference-area-fade-${uniqueId}`;
+    const hGradientId = `${hMaskId}-gradient`;
+    const rect = useMemo(() => computeReferenceAreaRect({
+        innerWidth,
+        innerHeight,
+        x1,
+        x2,
+        y1,
+        y2,
+        ifOverflow,
+        xScale,
+        yScale,
+    }), [innerWidth, innerHeight, x1, x2, y1, y2, ifOverflow, xScale, yScale]);
+    const usesPattern = pattern !== "none";
+    const patternNode = useMemo(() => {
+        if (!usesPattern) {
+            return null;
+        }
+        return renderPatternPreset(pattern, patternId, {
+            color: patternColor,
+            scale: patternScale,
+            strokeWidth: patternStrokeWidth,
+            radius: patternRadius,
+            complement: patternComplement,
+            fill: patternFill,
+            dotFill: patternDotFill,
+            tileBackground: patternTileBackground,
+        });
+    }, [
+        usesPattern,
+        pattern,
+        patternId,
+        patternColor,
+        patternScale,
+        patternStrokeWidth,
+        patternRadius,
+        patternComplement,
+        patternFill,
+        patternDotFill,
+        patternTileBackground,
+    ]);
+    const fadeEdge = clampFadeLength(fadeEdgesLength);
+    const edgeMask = fadeEdges ? `url(#${hMaskId})` : undefined;
+    const lineDash = strokeStyle === "dashed" ? strokeDasharray : undefined;
+    if (!rect) {
+        return null;
+    }
+    const { x, y, width, height } = rect;
+    const topEdgeY = y;
+    const bottomEdgeY = y + height;
+    const centerX = x + width / 2;
+    const visible = isReferenceAreaVisiblePhase(chartPhase);
+    const fadeTransition = enterTransition && typeof enterTransition === "object"
+        ? enterTransition
+        : { duration: ENTER_FADE_MS / 1000, ease: "easeOut" };
+    const areaFill = usesPattern && patternNode ? `url(#${patternId})` : fill;
+    return (_jsxs(motion.g, { animate: { opacity: visible ? 1 : 0 }, "aria-hidden": "true", className: className ?? "chart-reference-area", initial: { opacity: 0 }, transition: fadeTransition, children: [edgeMask ? (_jsxs("defs", { children: [_jsxs("linearGradient", { id: hGradientId, x1: "0%", x2: "100%", y1: "0%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "white", stopOpacity: 0 } }), _jsx("stop", { offset: `${fadeEdge}%`, style: { stopColor: "white", stopOpacity: 1 } }), _jsx("stop", { offset: `${100 - fadeEdge}%`, style: { stopColor: "white", stopOpacity: 1 } }), _jsx("stop", { offset: "100%", style: { stopColor: "white", stopOpacity: 0 } })] }), _jsx("mask", { id: hMaskId, children: _jsx("rect", { fill: `url(#${hGradientId})`, height: innerHeight, width: innerWidth, x: 0, y: 0 }) })] })) : null, patternNode ? _jsx("defs", { children: patternNode }) : null, _jsx("rect", { fill: areaFill, fillOpacity: fillOpacity, height: height, mask: edgeMask, width: width, x: x, y: y }), _jsxs("g", { mask: edgeMask, children: [_jsx("line", { stroke: stroke, strokeDasharray: lineDash, strokeWidth: strokeWidth, x1: x, x2: x + width, y1: topEdgeY, y2: topEdgeY }), _jsx("line", { stroke: stroke, strokeDasharray: lineDash, strokeWidth: strokeWidth, x1: x, x2: x + width, y1: bottomEdgeY, y2: bottomEdgeY })] }), showMarkers ? (_jsxs(_Fragment, { children: [_jsx("path", { d: bracketMarkerPath(centerX, topEdgeY, markerSize, "down"), fill: markerColor }), _jsx("path", { d: bracketMarkerPath(centerX, bottomEdgeY, markerSize, "up"), fill: markerColor })] })) : null] }));
+}
+ReferenceArea.displayName = "ReferenceArea";
+export default ReferenceArea;
+//# sourceMappingURL=reference-area.js.map

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

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { type ChartStatFlowFormat } from "./chart-stat-flow.js";
+export interface RingCenterProps {
+    /** 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;
+            maxValue: number;
+            color?: 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;
+}
+/**
+ * RingCenter displays content in the center of the ring 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 RingChart uses CSS Grid stacking to overlay this HTML content
+ * on top of the SVG rings.
+ */
+export declare function RingCenter({ defaultLabel, formatOptions, children, className, valueClassName, labelClassName, prefix, suffix, }: RingCenterProps): import("react").JSX.Element;
+export declare namespace RingCenter {
+    var displayName: string;
+}
+export default RingCenter;
+//# sourceMappingURL=ring-center.d.ts.map

package/dist/charts/ring-center.js

@@ -0,0 +1,41 @@
+"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 { useRingHover, useRingStable } from "./ring-context.js";
+/**
+ * RingCenter displays content in the center of the ring 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 RingChart uses CSS Grid stacking to overlay this HTML content
+ * on top of the SVG rings.
+ */
+export 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;
+    // Calculate center area size based on scaled baseInnerRadius
+    // Leave some padding so text doesn't touch the inner ring
+    const centerSize = baseInnerRadius * 2 - 16;
+    // 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: hoveredIndex !== 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 }) }));
+}
+RingCenter.displayName = "RingCenter";
+export default RingCenter;
+//# sourceMappingURL=ring-center.js.map

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

@@ -0,0 +1,41 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+import { type RingData } from "./ring-context.js";
+export interface RingChartProps {
+    /** Data array - each item represents a ring */
+    data: RingData[];
+    /** Chart size in pixels. If not provided, uses parent container size */
+    size?: number;
+    /** Stroke width of each ring. Default: 12 */
+    strokeWidth?: number;
+    /** Gap between rings. Default: 6 */
+    ringGap?: number;
+    /** Inner radius of the innermost ring. Default: 60 */
+    baseInnerRadius?: number;
+    /** Animation duration in milliseconds. Default: 1100 */
+    animationDuration?: number;
+    /** Additional class name for the container */
+    className?: string;
+    /** Controlled hover state - index of hovered ring */
+    hoveredIndex?: number | null;
+    /** Callback when hover state changes */
+    onHoverChange?: (index: number | null) => void;
+    /** Start angle in radians. Default: -PI/2 (top) */
+    startAngle?: number;
+    /** End angle in radians. Default: 3*PI/2 (full circle) */
+    endAngle?: number;
+    /** Framer Motion transition for ring enter animation */
+    enterTransition?: Transition;
+    /** Scales ring stagger delays (1 = default). */
+    enterStaggerScale?: number;
+    /**
+     * High-frequency geometry updates (e.g. studio NumberField scrub).
+     * Uses plain SVG paths instead of Motion `d` morphing.
+     */
+    geometryScrubbing?: boolean;
+    /** Child components (Ring, RingCenter, etc.) */
+    children: ReactNode;
+}
+export declare function RingChart({ data, size: fixedSize, strokeWidth, ringGap, baseInnerRadius, className, hoveredIndex, onHoverChange, startAngle, endAngle, enterTransition, enterStaggerScale, geometryScrubbing, children, }: RingChartProps): import("react").JSX.Element;
+export default RingChart;
+//# sourceMappingURL=ring-chart.d.ts.map

package/dist/charts/ring-chart.js

@@ -0,0 +1,212 @@
+"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 { Children, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { defaultRingColors, RingProvider, ringCssVars, } from "./ring-context.js";
+function generateRingArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius) {
+    const generator = arcGenerator({
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+    });
+    return generator({ startAngle, endAngle }) || "";
+}
+function isRing(child) {
+    return (isValidElement(child) &&
+        typeof child.type === "function" &&
+        (child.type.displayName === "Ring" ||
+            child.type.name === "Ring"));
+}
+// Helper to check if a child is a RingCenter component
+function isRingCenter(child) {
+    return (isValidElement(child) &&
+        typeof child.type === "function" &&
+        (child.type.displayName === "RingCenter" ||
+            child.type.name === "RingCenter"));
+}
+function RingChartInner(props) {
+    const size = Math.min(props.width, props.height);
+    if (size < 10) {
+        return null;
+    }
+    return _jsx(RingChartCore, { ...props });
+}
+const RingChartCore = memo(function RingChartCore({ width, height, data, strokeWidth: strokeWidthProp, ringGap: ringGapProp, baseInnerRadius: baseInnerRadiusProp, children, containerRef, hoveredIndexProp, onHoverChange, startAngle, endAngle, 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 scaled dimensions to fit within the available space
+    // The outermost ring needs to fit within the chart with some padding
+    const ringCount = data.length;
+    const padding = 8; // Padding from edge
+    const availableRadius = center - padding;
+    // Calculate the "design" outer radius (what we'd need at 1:1 scale)
+    const designOuterRadius = baseInnerRadiusProp + (ringCount - 1) * (strokeWidthProp + ringGapProp) + strokeWidthProp;
+    // Scale factor to fit within available space
+    const scale = Math.min(1, availableRadius / designOuterRadius);
+    // Apply scaling to all dimensions
+    const strokeWidth = strokeWidthProp * scale;
+    const ringGap = ringGapProp * scale;
+    const baseInnerRadius = baseInnerRadiusProp * scale;
+    // Calculate total value
+    const totalValue = useMemo(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+    // Get color for a ring index
+    const getColor = useCallback((index) => {
+        const item = data[index];
+        if (item?.color) {
+            return item.color;
+        }
+        return defaultRingColors[index % defaultRingColors.length];
+    }, [data]);
+    // Get ring radii for an index
+    const getRingRadii = useCallback((index) => {
+        const innerRadius = baseInnerRadius + index * (strokeWidth + ringGap);
+        const outerRadius = innerRadius + strokeWidth;
+        return { innerRadius, outerRadius };
+    }, [baseInnerRadius, strokeWidth, ringGap]);
+    const arcRange = endAngle - startAngle;
+    const scrubRingLayers = useMemo(() => {
+        if (!geometryScrubbing) {
+            return null;
+        }
+        return data.map((ringData, index) => {
+            const { innerRadius, outerRadius } = getRingRadii(index);
+            const cornerRadius = (outerRadius - innerRadius) / 2;
+            const progress = ringData.value / ringData.maxValue;
+            const progressEndAngle = startAngle + arcRange * progress;
+            return {
+                bgPath: generateRingArcPath(innerRadius, outerRadius, startAngle, endAngle, cornerRadius),
+                progressPath: progressEndAngle <= startAngle + 0.01
+                    ? ""
+                    : generateRingArcPath(innerRadius, outerRadius, startAngle, progressEndAngle, cornerRadius),
+                color: getColor(index),
+            };
+        });
+    }, [geometryScrubbing, data, getRingRadii, getColor, startAngle, endAngle, arcRange]);
+    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 SVG children (rings) from HTML children (RingCenter)
+    // This avoids Safari's foreignObject positioning bugs (WebKit #23113)
+    const { svgChildren, centerChildren } = useMemo(() => {
+        const svgNodes = [];
+        const centerNodes = [];
+        Children.forEach(children, (child) => {
+            if (isRingCenter(child)) {
+                centerNodes.push(child);
+            }
+            else if (geometryScrubbing && isRing(child)) {
+                return;
+            }
+            else {
+                svgNodes.push(child);
+            }
+        });
+        return { svgChildren: svgNodes, centerChildren: centerNodes };
+    }, [children, geometryScrubbing]);
+    const contextValue = useMemo(() => ({
+        data,
+        size,
+        center,
+        strokeWidth,
+        ringGap,
+        baseInnerRadius,
+        hoveredIndex,
+        setHoveredIndex,
+        animationKey,
+        isLoaded: effectiveIsLoaded,
+        enterTransition,
+        enterStaggerScale,
+        containerRef,
+        totalValue,
+        getColor,
+        getRingRadii,
+        startAngle,
+        endAngle,
+        geometryScrubbing,
+    }), [
+        data,
+        size,
+        center,
+        strokeWidth,
+        ringGap,
+        baseInnerRadius,
+        hoveredIndex,
+        setHoveredIndex,
+        animationKey,
+        effectiveIsLoaded,
+        enterTransition,
+        enterStaggerScale,
+        containerRef,
+        totalValue,
+        getColor,
+        getRingRadii,
+        startAngle,
+        endAngle,
+        geometryScrubbing,
+    ]);
+    // Use CSS Grid stacking to layer SVG and HTML content
+    // This avoids Safari's foreignObject rendering bugs where HTML content
+    // inside SVG foreignObject renders at wrong positions when it has a RenderLayer
+    return (_jsx(RingProvider, { value: contextValue, children: _jsxs("div", { className: "grid", style: {
+                gridTemplateColumns: "1fr",
+                gridTemplateRows: "1fr",
+                width: size,
+                height: size,
+            }, children: [_jsx("svg", { "aria-hidden": "true", height: size, style: { gridArea: "1 / 1", contain: "layout style paint" }, width: size, children: _jsxs(Group, { left: center, top: center, children: [scrubRingLayers
+                                ? scrubRingLayers.map((layer, index) => (_jsxs("g", { children: [_jsx("path", { d: layer.bgPath, fill: ringCssVars.ringBackground }), layer.progressPath ? _jsx("path", { d: layer.progressPath, fill: layer.color }) : null] }, data[index]?.label ?? index)))
+                                : null, svgChildren] }) }), centerChildren.length > 0 && (_jsx("div", { className: "pointer-events-none flex items-center justify-center", style: { gridArea: "1 / 1" }, children: centerChildren }))] }) }));
+}, ringChartCorePropsEqual);
+function ringChartCorePropsEqual(prev, next) {
+    return (prev.width === next.width &&
+        prev.height === next.height &&
+        prev.data === next.data &&
+        prev.strokeWidth === next.strokeWidth &&
+        prev.ringGap === next.ringGap &&
+        prev.baseInnerRadius === next.baseInnerRadius &&
+        prev.hoveredIndexProp === next.hoveredIndexProp &&
+        prev.onHoverChange === next.onHoverChange &&
+        prev.startAngle === next.startAngle &&
+        prev.endAngle === next.endAngle &&
+        prev.enterTransition === next.enterTransition &&
+        prev.enterStaggerScale === next.enterStaggerScale &&
+        prev.geometryScrubbing === next.geometryScrubbing &&
+        prev.children === next.children);
+}
+export function RingChart({ data, size: fixedSize, strokeWidth = 12, ringGap = 6, baseInnerRadius = 60, className = "", hoveredIndex, onHoverChange, startAngle = -Math.PI / 2, endAngle = (3 * Math.PI) / 2, 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": "ring-chart", className: cn("relative flex items-center justify-center", className), ref: containerRef, style: { width: fixedSize, height: fixedSize }, children: _jsx(RingChartInner, { baseInnerRadius: baseInnerRadius, containerRef: containerRef, data: data, endAngle: endAngle, enterStaggerScale: enterStaggerScale, enterTransition: enterTransition, geometryScrubbing: geometryScrubbing, height: fixedSize, hoveredIndexProp: hoveredIndex, onHoverChange: onHoverChange, ringGap: ringGap, startAngle: startAngle, strokeWidth: strokeWidth, 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(RingChartInner, { baseInnerRadius: baseInnerRadius, containerRef: containerRef, data: data, endAngle: endAngle, enterStaggerScale: enterStaggerScale, enterTransition: enterTransition, geometryScrubbing: geometryScrubbing, height: height, hoveredIndexProp: hoveredIndex, onHoverChange: onHoverChange, ringGap: ringGap, startAngle: startAngle, strokeWidth: strokeWidth, width: width, children: children })) }) }));
+}
+export default RingChart;
+//# sourceMappingURL=ring-chart.js.map

package/dist/charts/ring-context.d.ts

@@ -0,0 +1,66 @@
+import type { Transition } from "motion/react";
+import { type ReactNode, type RefObject } from "react";
+export declare const ringCssVars: {
+    background: string;
+    foreground: string;
+    foregroundMuted: string;
+    label: string;
+    ringBackground: string;
+    ring1: string;
+    ring2: string;
+    ring3: string;
+    ring4: string;
+    ring5: string;
+};
+export declare const defaultRingColors: string[];
+export interface RingData {
+    /** Display label for the ring */
+    label: string;
+    /** Current value */
+    value: number;
+    /** Maximum value (determines progress percentage) */
+    maxValue: number;
+    /** Optional color override - falls back to palette */
+    color?: string;
+}
+export interface RingHoverContextValue {
+    hoveredIndex: number | null;
+    setHoveredIndex: (index: number | null) => void;
+}
+export interface RingStableContextValue {
+    data: RingData[];
+    size: number;
+    center: number;
+    strokeWidth: number;
+    ringGap: number;
+    baseInnerRadius: number;
+    animationKey: number;
+    isLoaded: boolean;
+    enterTransition?: Transition;
+    enterStaggerScale: number;
+    containerRef: RefObject<HTMLDivElement | null>;
+    totalValue: number;
+    getColor: (index: number) => string;
+    getRingRadii: (index: number) => {
+        innerRadius: number;
+        outerRadius: number;
+    };
+    startAngle: number;
+    endAngle: number;
+    /**
+     * Studio geometry scrub — skip Motion path morphing and use plain SVG paths.
+     * @default false
+     */
+    geometryScrubbing: boolean;
+}
+export type RingContextValue = RingStableContextValue & RingHoverContextValue;
+declare const RingStableContext: import("react").Context<RingStableContextValue | null>;
+export declare function RingProvider({ children, value, }: {
+    children: ReactNode;
+    value: RingContextValue;
+}): import("react").JSX.Element;
+export declare function useRingStable(): RingStableContextValue;
+export declare function useRingHover(): RingHoverContextValue;
+export declare function useRing(): RingContextValue;
+export default RingStableContext;
+//# sourceMappingURL=ring-context.d.ts.map

package/dist/charts/ring-context.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+// CSS variable references for ring chart theming
+export const ringCssVars = {
+    background: "var(--chart-background)",
+    foreground: "var(--chart-foreground)",
+    foregroundMuted: "var(--chart-foreground-muted)",
+    label: "var(--chart-label)",
+    ringBackground: "var(--border)",
+    // Default ring colors from chart palette
+    ring1: "var(--chart-1)",
+    ring2: "var(--chart-2)",
+    ring3: "var(--chart-3)",
+    ring4: "var(--chart-4)",
+    ring5: "var(--chart-5)",
+};
+// Default ring color palette
+export const defaultRingColors = [
+    ringCssVars.ring1,
+    ringCssVars.ring2,
+    ringCssVars.ring3,
+    ringCssVars.ring4,
+    ringCssVars.ring5,
+];
+const RingStableContext = createContext(null);
+const RingHoverContext = createContext(null);
+export function RingProvider({ children, value, }) {
+    const stable = useMemo(() => ({
+        data: value.data,
+        size: value.size,
+        center: value.center,
+        strokeWidth: value.strokeWidth,
+        ringGap: value.ringGap,
+        baseInnerRadius: value.baseInnerRadius,
+        animationKey: value.animationKey,
+        isLoaded: value.isLoaded,
+        enterTransition: value.enterTransition,
+        enterStaggerScale: value.enterStaggerScale,
+        containerRef: value.containerRef,
+        totalValue: value.totalValue,
+        getColor: value.getColor,
+        getRingRadii: value.getRingRadii,
+        startAngle: value.startAngle,
+        endAngle: value.endAngle,
+        geometryScrubbing: value.geometryScrubbing,
+    }), [
+        value.data,
+        value.size,
+        value.center,
+        value.strokeWidth,
+        value.ringGap,
+        value.baseInnerRadius,
+        value.animationKey,
+        value.isLoaded,
+        value.enterTransition,
+        value.enterStaggerScale,
+        value.containerRef,
+        value.totalValue,
+        value.getColor,
+        value.getRingRadii,
+        value.startAngle,
+        value.endAngle,
+        value.geometryScrubbing,
+    ]);
+    const hover = useMemo(() => ({
+        hoveredIndex: value.hoveredIndex,
+        setHoveredIndex: value.setHoveredIndex,
+    }), [value.hoveredIndex, value.setHoveredIndex]);
+    return (_jsx(RingStableContext.Provider, { value: stable, children: _jsx(RingHoverContext.Provider, { value: hover, children: children }) }));
+}
+export function useRingStable() {
+    const context = useContext(RingStableContext);
+    if (!context) {
+        throw new Error("useRingStable must be used within a RingProvider. " +
+            "Make sure your component is wrapped in <RingChart>.");
+    }
+    return context;
+}
+export function useRingHover() {
+    const context = useContext(RingHoverContext);
+    if (!context) {
+        throw new Error("useRingHover must be used within a RingProvider. " +
+            "Make sure your component is wrapped in <RingChart>.");
+    }
+    return context;
+}
+export function useRing() {
+    return { ...useRingStable(), ...useRingHover() };
+}
+export default RingStableContext;
+//# sourceMappingURL=ring-context.js.map

package/dist/charts/ring.d.ts

@@ -0,0 +1,11 @@
+export type RingLineCap = "round" | "butt";
+export interface RingProps {
+    index: number;
+    color?: string;
+    animate?: boolean;
+    showGlow?: boolean;
+    lineCap?: RingLineCap;
+}
+export declare const Ring: import("react").MemoExoticComponent<({ index, color: colorProp, animate, showGlow, lineCap, }: RingProps) => import("react").JSX.Element | null>;
+export default Ring;
+//# sourceMappingURL=ring.d.ts.map