@cronus-ui/ui 0.6.0

package/dist/charts/series-point-marker.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { memo } from "react";
+import { DEFAULT_CHART_ENTER_TRANSITION } from "./animation.js";
+function MarkerCircles({ fill, stroke, strokeWidth, ringGap, outlineWidth, outlineColor, radius, }) {
+    const resolvedStroke = stroke ?? fill ?? "currentColor";
+    const resolvedOutlineColor = outlineColor ?? resolvedStroke;
+    const ringOuter = strokeWidth > 0 ? radius + ringGap + strokeWidth : radius;
+    const outlineRadius = outlineWidth > 0 ? ringOuter + outlineWidth / 2 : 0;
+    return (_jsxs(_Fragment, { children: [outlineWidth > 0 ? (_jsx("circle", { cx: 0, cy: 0, fill: "none", r: outlineRadius, stroke: resolvedOutlineColor, strokeWidth: outlineWidth })) : null, _jsx("circle", { cx: 0, cy: 0, fill: fill, r: radius }), strokeWidth > 0 ? (_jsx("circle", { cx: 0, cy: 0, fill: "none", r: radius + ringGap + strokeWidth / 2, stroke: resolvedStroke, strokeWidth: strokeWidth })) : null] }));
+}
+export const StaticSeriesPointMarker = memo(function StaticSeriesPointMarker({ cx, cy, scale = 1, fill, stroke, strokeWidth = 2, ringGap = 2, outlineWidth = 0, outlineColor, radius = 5, }) {
+    return (_jsx("g", { transform: `translate(${cx}, ${cy}) scale(${scale})`, children: _jsx(MarkerCircles, { fill: fill, outlineColor: outlineColor, outlineWidth: outlineWidth, radius: radius, ringGap: ringGap, stroke: stroke, strokeWidth: strokeWidth }) }));
+});
+/** Motion enter marker — used only while the chart reveal is running. */
+export function SeriesPointMarker({ dataKey, index, cx, cy, enterBlur = 2, revealDelay, revealEpoch, enterDuration, fill, stroke, strokeWidth = 2, ringGap = 2, outlineWidth = 0, outlineColor, radius = 5, }) {
+    const variants = {
+        hidden: {
+            opacity: 0,
+            filter: `blur(${enterBlur}px)`,
+            scale: 1,
+        },
+        visible: {
+            opacity: 1,
+            filter: "blur(0px)",
+            scale: 1,
+            transition: {
+                delay: revealDelay,
+                duration: enterDuration,
+                ease: DEFAULT_CHART_ENTER_TRANSITION.ease,
+            },
+        },
+    };
+    return (_jsx("g", { transform: `translate(${cx}, ${cy})`, children: _jsx(motion.g, { animate: "visible", initial: "hidden", variants: variants, children: _jsx(MarkerCircles, { fill: fill, outlineColor: outlineColor, outlineWidth: outlineWidth, radius: radius, ringGap: ringGap, stroke: stroke, strokeWidth: strokeWidth }) }, `${dataKey}-${index}-${revealEpoch}`) }));
+}
+export function getSeriesMarkerVisualExtent(style) {
+    const radius = style.radius ?? 5;
+    const strokeWidth = style.strokeWidth ?? 2;
+    const ringGap = style.ringGap ?? 2;
+    const outlineWidth = style.outlineWidth ?? 0;
+    const showActiveHighlight = style.showActiveHighlight ?? true;
+    const ring = strokeWidth > 0 ? ringGap + strokeWidth : 0;
+    const outline = outlineWidth > 0 ? outlineWidth : 0;
+    const highlightPad = showActiveHighlight ? radius * 0.35 : 0;
+    return radius + ring + outline + highlightPad + 2;
+}
+//# sourceMappingURL=series-point-marker.js.map

package/dist/charts/shimmering-text.d.ts

@@ -0,0 +1,23 @@
+import { motion } from "motion/react";
+import { type ComponentProps } from "react";
+export type ShimmeringTextProps = Omit<ComponentProps<typeof motion.span>, "children"> & {
+    /** The text to render with the shimmering effect. */
+    text: string;
+    /**
+     * Duration in seconds for one shimmer cycle.
+     * @defaultValue 1
+     */
+    duration?: number;
+    /**
+     * Pause the shimmer (e.g. when the hero leaves the viewport).
+     * @defaultValue false
+     */
+    paused?: boolean;
+    /**
+     * Legacy alias for `paused`.
+     * @defaultValue false
+     */
+    isStopped?: boolean;
+};
+export declare function ShimmeringText({ text, duration, isStopped, paused, className, ...props }: ShimmeringTextProps): import("react").JSX.Element;
+//# sourceMappingURL=shimmering-text.d.ts.map

package/dist/charts/shimmering-text.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { useCallback } from "react";
+import { cn } from "../lib/cn.js";
+export function ShimmeringText({ text, duration = 1, isStopped = false, paused = false, className, ...props }) {
+    const reducedMotion = useReducedMotion();
+    const stopped = isStopped || paused || reducedMotion === true;
+    const createCharVariants = useCallback((charIndex) => ({
+        running: {
+            color: ["var(--color)", "var(--shimmering-color)", "var(--color)"],
+            transition: {
+                duration,
+                repeat: Number.POSITIVE_INFINITY,
+                repeatType: "loop",
+                repeatDelay: text.length * 0.05,
+                delay: (charIndex * duration) / text.length,
+                ease: "easeInOut",
+            },
+        },
+        stopped: {
+            color: "var(--color)",
+            transition: {
+                duration: duration * 0.5,
+                ease: "easeOut",
+            },
+        },
+    }), [duration, text.length]);
+    return (_jsx(motion.span, { className: cn("inline-flex select-none items-center leading-none", "[--color:var(--cronus-fg-tertiary)] [--shimmering-color:var(--cronus-fg)]", className), ...props, children: text.split("").map((char, index) => (_jsx(motion.span, { animate: stopped ? "stopped" : "running", "aria-hidden": true, className: "inline-block whitespace-pre leading-none", initial: "stopped", variants: createCharVariants(index), children: char }, `${char}-${index}`))) }));
+}
+//# sourceMappingURL=shimmering-text.js.map

package/dist/charts/static-chart-preview-context.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+/** Disables cartesian reveal clip-path for static docs previews. */
+export declare function StaticChartPreviewProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useStaticChartPreview(): boolean;
+//# sourceMappingURL=static-chart-preview-context.d.ts.map

package/dist/charts/static-chart-preview-context.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const StaticChartPreviewContext = createContext(false);
+/** Disables cartesian reveal clip-path for static docs previews. */
+export function StaticChartPreviewProvider({ children }) {
+    return (_jsx(StaticChartPreviewContext.Provider, { value: true, children: children }));
+}
+export function useStaticChartPreview() {
+    return useContext(StaticChartPreviewContext);
+}
+//# sourceMappingURL=static-chart-preview-context.js.map

package/dist/charts/sunburst-breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export interface SunburstBreadcrumbItem {
+    id: string;
+    label: string;
+    isCurrent: boolean;
+}
+export declare function useSunburstBreadcrumbItems(): {
+    items: SunburstBreadcrumbItem[];
+    zoomTo: (nextId: string) => void;
+};
+export interface SunburstBreadcrumbProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare const SunburstBreadcrumb: import("react").MemoExoticComponent<({ className, children, }: SunburstBreadcrumbProps) => import("react").JSX.Element>;
+//# sourceMappingURL=sunburst-breadcrumb.d.ts.map

package/dist/charts/sunburst-breadcrumb.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { useSunburstStable } from "./sunburst-context.js";
+export function useSunburstBreadcrumbItems() {
+    const { data, focus, focusById, rootId, zoomTo } = useSunburstStable();
+    const items = useMemo(() => {
+        const crumbs = [];
+        let cur = focus;
+        while (cur) {
+            crumbs.unshift(cur);
+            cur = cur.parentId ? focusById.get(cur.parentId) : undefined;
+        }
+        return crumbs.map((c, index) => ({
+            id: c.id,
+            label: c.id === rootId ? data.name : c.name,
+            isCurrent: index === crumbs.length - 1,
+        }));
+    }, [data.name, focus, focusById, rootId]);
+    return { items, zoomTo };
+}
+export const SunburstBreadcrumb = memo(function SunburstBreadcrumb({ className, children, }) {
+    return (_jsx("nav", { "aria-label": "Drill-down path", className: className ?? "mb-4", children: children }));
+});
+SunburstBreadcrumb.displayName = "SunburstBreadcrumb";
+//# sourceMappingURL=sunburst-breadcrumb.js.map

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

@@ -0,0 +1,5 @@
+export interface SunburstCenterProps {
+    className?: string;
+}
+export declare const SunburstCenter: import("react").MemoExoticComponent<({ className }: SunburstCenterProps) => import("react").JSX.Element | null>;
+//# sourceMappingURL=sunburst-center.d.ts.map

package/dist/charts/sunburst-center.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { ringOptions } from "./sunburst.js";
+import { sunburstCssVars, useSunburstStable } from "./sunburst-context.js";
+export const SunburstCenter = memo(function SunburstCenter({ className }) {
+    const { focus, prevFocus, maxDepth, radius, zoomT, zoomTo, getColor } = useSunburstStable();
+    const { centerR } = ringOptions(focus.depth, maxDepth, radius);
+    const liveCenterR = centerR * zoomT + ringOptions(prevFocus.depth, maxDepth, radius).centerR * (1 - zoomT);
+    if (liveCenterR <= 1) {
+        return null;
+    }
+    const centerColor = focus.depth === 0 ? sunburstCssVars.background : getColor(focus.categoryIndex);
+    return (_jsx("circle", { className: className, cx: 0, cy: 0, fill: centerColor, onClick: () => focus.parentId && zoomTo(focus.parentId), r: Math.max(liveCenterR - 2, 0), stroke: sunburstCssVars.ring, strokeWidth: 1, style: { cursor: focus.parentId ? "pointer" : "default" } }));
+});
+SunburstCenter.displayName = "SunburstCenter";
+//# sourceMappingURL=sunburst-center.js.map

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

@@ -0,0 +1,30 @@
+import type { Transition } from "motion/react";
+import { type ReactNode } from "react";
+import type { SunburstNode } from "./sunburst-data.js";
+export type { ArcDatum, Focus } from "./sunburst.js";
+export type { SunburstNode } from "./sunburst-data.js";
+export interface SunburstChartProps {
+    data: SunburstNode;
+    size?: number;
+    /** Bump to replay the initialization animation. */
+    playKey?: number;
+    className?: string;
+    /** Controlled focus node id for drill-down. */
+    focusId?: string;
+    /** Called when focus changes via segment click or breadcrumb. */
+    onFocusChange?: (focusId: string) => void;
+    /** Controlled hover — arc index in the arcs array. */
+    hoveredIndex?: number | null;
+    onHoverChange?: (index: number | null) => void;
+    hoverPop?: number;
+    /** Inset reserved for hover growth; defaults from layout depth and hoverPop. */
+    padding?: number;
+    enterTransition?: Transition;
+    enterStaggerScale?: number;
+    children: ReactNode;
+}
+export declare function SunburstChart(props: SunburstChartProps): import("react").JSX.Element;
+export declare namespace SunburstChart {
+    var displayName: string;
+}
+//# sourceMappingURL=sunburst-chart.d.ts.map

package/dist/charts/sunburst-chart.js

@@ -0,0 +1,263 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animate, motion } from "motion/react";
+import { Children, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { buildArcs, buildHoverGrowTargets, buildSunburstEnterTiming, defaultSunburstGrowPadding, maxHoverSegmentThickness, } from "./sunburst.js";
+import { defaultSunburstColors, opacityForRelativeDepth, SunburstProvider, } from "./sunburst-context.js";
+const DEFAULT_HOVER_POP = 8;
+function componentDisplayName(child) {
+    return (child.type.displayName ||
+        child.type.name ||
+        "");
+}
+function isDefsComponent(child) {
+    const name = componentDisplayName(child);
+    return (name.includes("Gradient") ||
+        name.includes("Pattern") ||
+        name === "LinearGradient" ||
+        name === "RadialGradient");
+}
+function isOutsideSvgComponent(name) {
+    return name === "SunburstBreadcrumb" || name === "SunburstHint";
+}
+function isSunburstSegment(child) {
+    return isValidElement(child) && componentDisplayName(child) === "SunburstSegment";
+}
+/** Inner rings last so parent segments win hit testing at ring boundaries. */
+function sortSunburstSegments(segments, arcs) {
+    return [...segments].sort((a, b) => {
+        const arcA = arcs[a.props.index];
+        const arcB = arcs[b.props.index];
+        const depthA = arcA?.depth ?? 0;
+        const depthB = arcB?.depth ?? 0;
+        if (depthA !== depthB) {
+            return depthB - depthA;
+        }
+        return (b.props.index ?? 0) - (a.props.index ?? 0);
+    });
+}
+const SunburstChartCore = memo(function SunburstChartCore({ data, size = 520, playKey = 0, className, focusId: focusIdProp, onFocusChange, hoveredIndex: hoveredIndexProp, onHoverChange, hoverPop = DEFAULT_HOVER_POP, padding: paddingProp, enterTransition, enterStaggerScale = 1, children, }) {
+    const fullRadius = size / 2;
+    const containerRef = useRef(null);
+    const { arcs, maxDepth, focusById, rootId } = useMemo(() => buildArcs(data), [data]);
+    const growPadding = useMemo(() => paddingProp ?? defaultSunburstGrowPadding(maxDepth, size, hoverPop), [paddingProp, maxDepth, size, hoverPop]);
+    const radius = Math.max(8, fullRadius - growPadding);
+    const [skipEnterAnimation, setSkipEnterAnimation] = useState(false);
+    const [internalHoveredArc, setInternalHoveredArc] = useState(null);
+    const [internalHoveredIndex, setInternalHoveredIndex] = useState(null);
+    const growRef = useRef(new Map());
+    const [growTick, setGrowTick] = useState(0);
+    const [internalFocusId, setInternalFocusId] = useState(rootId);
+    const [prevFocusId, setPrevFocusId] = useState(rootId);
+    const [zoomT, setZoomT] = useState(1);
+    const isFocusControlled = focusIdProp !== undefined;
+    const focusId = isFocusControlled ? focusIdProp : internalFocusId;
+    const isHoverControlled = hoveredIndexProp !== undefined;
+    const hoveredArcIndex = isHoverControlled ? hoveredIndexProp : internalHoveredIndex;
+    const hoveredArc = useMemo(() => {
+        if (hoveredArcIndex != null) {
+            return arcs[hoveredArcIndex] ?? null;
+        }
+        return internalHoveredArc;
+    }, [arcs, hoveredArcIndex, internalHoveredArc]);
+    const setHoveredArcIndex = useCallback((index) => {
+        if (isHoverControlled) {
+            onHoverChange?.(index);
+        }
+        else {
+            setInternalHoveredIndex(index);
+            setInternalHoveredArc(index == null ? null : (arcs[index] ?? null));
+        }
+    }, [arcs, isHoverControlled, onHoverChange]);
+    const setHoveredArc = useCallback((arc) => {
+        setHoveredArcIndex(arc ? arc.arcIndex : null);
+    }, [setHoveredArcIndex]);
+    const setFocusId = useCallback((nextId) => {
+        if (isFocusControlled) {
+            onFocusChange?.(nextId);
+        }
+        else {
+            setInternalFocusId(nextId);
+        }
+    }, [isFocusControlled, onFocusChange]);
+    const rootFocus = focusById.get(rootId);
+    const focus = focusById.get(focusId) ?? rootFocus;
+    const prevFocus = focusById.get(prevFocusId) ?? focus;
+    useEffect(() => {
+        if (!isFocusControlled) {
+            setInternalFocusId(rootId);
+        }
+        setPrevFocusId(rootId);
+        setZoomT(1);
+    }, [rootId, isFocusControlled]);
+    const enterTiming = useMemo(() => buildSunburstEnterTiming(arcs, enterStaggerScale), [arcs, enterStaggerScale]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: replay when data or playKey changes
+    useEffect(() => {
+        setSkipEnterAnimation(typeof window !== "undefined" &&
+            window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true);
+    }, [playKey, arcs]);
+    const prefersReduced = () => typeof window !== "undefined" &&
+        window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const growControls = useRef(null);
+    const zoomControls = useRef(null);
+    const zoomGen = useRef(0);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: prefersReduced reads matchMedia at call time
+    const zoomTo = useCallback((nextId) => {
+        if (nextId === focusId) {
+            return;
+        }
+        setHoveredArc(null);
+        growControls.current?.stop();
+        growRef.current = new Map();
+        setGrowTick((n) => n + 1);
+        setPrevFocusId(focusId);
+        setFocusId(nextId);
+        zoomControls.current?.stop();
+        const gen = ++zoomGen.current;
+        if (prefersReduced()) {
+            setZoomT(1);
+            return;
+        }
+        setZoomT(0);
+        zoomControls.current = animate(0, 1, {
+            duration: 0.75,
+            ease: [0.22, 1, 0.36, 1],
+            onUpdate: (value) => {
+                if (zoomGen.current === gen) {
+                    setZoomT(value);
+                }
+            },
+            onComplete: () => {
+                if (zoomGen.current === gen) {
+                    setZoomT(1);
+                    setPrevFocusId(nextId);
+                }
+            },
+        });
+    }, [focusId, setFocusId, setHoveredArc]);
+    const isDescendant = useCallback((d, ancestorId) => d.id === ancestorId || d.id.startsWith(`${ancestorId} / `), []);
+    const isOnHoverPath = useCallback((d, hoveredId) => d.id === hoveredId || hoveredId.startsWith(`${d.id} / `), []);
+    const isRelated = useCallback((d) => {
+        if (!hoveredArc) {
+            return true;
+        }
+        return isDescendant(d, hoveredArc.id) || hoveredArc.id.startsWith(`${d.id} / `);
+    }, [hoveredArc, isDescendant]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: grow targets from visible hover path
+    useEffect(() => {
+        const targets = hoveredArc && focus
+            ? buildHoverGrowTargets(arcs, hoveredArc, focus, maxDepth, radius, hoverPop, isOnHoverPath)
+            : new Map();
+        const starts = new Map(growRef.current);
+        const ids = new Set([...starts.keys(), ...targets.keys()]);
+        growControls.current?.stop();
+        if (prefersReduced()) {
+            growRef.current = targets;
+            setGrowTick((n) => n + 1);
+            return;
+        }
+        growControls.current = animate(0, 1, {
+            duration: 0.42,
+            ease: [0.22, 1, 0.36, 1],
+            onUpdate: (p) => {
+                const next = new Map();
+                for (const id of ids) {
+                    const start = starts.get(id) ?? 0;
+                    const target = targets.get(id) ?? 0;
+                    const val = start + (target - start) * p;
+                    if (val > 0.01) {
+                        next.set(id, val);
+                    }
+                }
+                growRef.current = next;
+                setGrowTick((n) => n + 1);
+            },
+        });
+        return () => growControls.current?.stop();
+    }, [hoveredArc, arcs, hoverPop, isOnHoverPath, focus, maxDepth, radius]);
+    const getColor = useCallback((categoryIndex, nodeColor) => {
+        if (nodeColor) {
+            return nodeColor;
+        }
+        return defaultSunburstColors[categoryIndex % defaultSunburstColors.length];
+    }, []);
+    const getFill = useCallback((arcIndex, fillOverride, colorOverride) => {
+        if (fillOverride) {
+            return fillOverride;
+        }
+        const arc = arcs[arcIndex];
+        if (!arc) {
+            return defaultSunburstColors[0];
+        }
+        return colorOverride ?? arc.fill ?? arc.color ?? getColor(arc.categoryIndex);
+    }, [arcs, getColor]);
+    const getFillOpacity = useCallback((relativeDepth, override) => override ?? opacityForRelativeDepth(relativeDepth), []);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: growTick forces re-read from growRef
+    const growAmountForArc = useCallback((arcId) => growRef.current.get(arcId) ?? 0, [growTick]);
+    const maxExpandedThickness = useMemo(() => maxHoverSegmentThickness(maxDepth, radius, hoverPop), [maxDepth, radius, hoverPop]);
+    if (!(focus && prevFocus)) {
+        return null;
+    }
+    const childArray = Children.toArray(children);
+    const defsChildren = childArray.filter((child) => isValidElement(child) && isDefsComponent(child));
+    const outsideChildren = [];
+    const svgChildren = [];
+    for (const child of childArray) {
+        if (!isValidElement(child)) {
+            svgChildren.push(child);
+            continue;
+        }
+        if (isDefsComponent(child)) {
+            continue;
+        }
+        const name = componentDisplayName(child);
+        if (isOutsideSvgComponent(name)) {
+            outsideChildren.push(child);
+        }
+        else {
+            svgChildren.push(child);
+        }
+    }
+    const segmentChildren = svgChildren.filter(isSunburstSegment);
+    const otherSvgChildren = svgChildren.filter((child) => !isSunburstSegment(child));
+    const orderedSegments = sortSunburstSegments(segmentChildren, arcs);
+    const orderedSvgChildren = [...orderedSegments, ...otherSvgChildren];
+    const providerValue = {
+        data,
+        arcs,
+        focusById,
+        rootId,
+        maxDepth,
+        radius,
+        size,
+        focus,
+        prevFocus,
+        focusId,
+        zoomTo,
+        zoomT,
+        enterTiming,
+        skipEnterAnimation,
+        growAmountForArc,
+        getColor,
+        getFill,
+        getFillOpacity,
+        isRelated,
+        isDescendant,
+        enterTransition,
+        enterStaggerScale,
+        playKey,
+        hoverPop,
+        maxExpandedThickness,
+        containerRef,
+        hoveredArcIndex,
+        setHoveredArcIndex,
+        hoveredArc,
+        setHoveredArc,
+    };
+    return (_jsx(SunburstProvider, { value: providerValue, children: _jsxs("div", { className: className, "data-slot": "sunburst-chart", ref: containerRef, style: { maxWidth: "100%", width: size }, children: [outsideChildren.filter((child) => isValidElement(child) && componentDisplayName(child) === "SunburstBreadcrumb"), _jsx("div", { className: "mx-auto w-full", style: { aspectRatio: "1 / 1", maxWidth: size }, children: _jsxs(motion.svg, { animate: { opacity: 1 }, "aria-label": `Sunburst chart of ${data.name}`, initial: { opacity: 0 }, onPointerLeave: () => setHoveredArc(null), role: "img", style: { display: "block", overflow: "visible" }, transition: { duration: 0.35, ease: [0.22, 1, 0.36, 1] }, viewBox: `${-fullRadius} ${-fullRadius} ${size} ${size}`, width: "100%", children: [defsChildren.length > 0 ? _jsx("defs", { children: defsChildren }) : null, orderedSvgChildren] }) }), outsideChildren.filter((child) => isValidElement(child) && componentDisplayName(child) === "SunburstHint")] }) }));
+});
+export function SunburstChart(props) {
+    return _jsx(SunburstChartCore, { ...props });
+}
+SunburstChart.displayName = "SunburstChart";
+//# sourceMappingURL=sunburst-chart.js.map

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

@@ -0,0 +1,61 @@
+import type { Transition } from "motion/react";
+import { type ReactNode, type RefObject } from "react";
+import type { ArcDatum, Focus, SunburstEnterTiming } from "./sunburst.js";
+import type { SunburstNode } from "./sunburst-data.js";
+export declare const sunburstCssVars: {
+    background: string;
+    foreground: string;
+    foregroundMuted: string;
+    label: string;
+    ring: string;
+    slice1: string;
+    slice2: string;
+    slice3: string;
+    slice4: string;
+    slice5: string;
+};
+export declare const defaultSunburstColors: string[];
+/** Relative depth within the current focus view (1 = innermost visible ring). */
+export declare function opacityForRelativeDepth(relativeDepth: number): number;
+export interface SunburstHoverContextValue {
+    hoveredArcIndex: number | null;
+    setHoveredArcIndex: (index: number | null) => void;
+    hoveredArc: ArcDatum | null;
+    setHoveredArc: (arc: ArcDatum | null) => void;
+}
+export interface SunburstStableContextValue {
+    data: SunburstNode;
+    arcs: ArcDatum[];
+    focusById: Map<string, Focus>;
+    rootId: string;
+    maxDepth: number;
+    radius: number;
+    size: number;
+    focus: Focus;
+    prevFocus: Focus;
+    focusId: string;
+    zoomTo: (nextId: string) => void;
+    zoomT: number;
+    enterTiming: SunburstEnterTiming;
+    skipEnterAnimation: boolean;
+    growAmountForArc: (arcId: string) => number;
+    getColor: (categoryIndex: number, nodeColor?: string) => string;
+    getFill: (arcIndex: number, fillOverride?: string, colorOverride?: string) => string;
+    getFillOpacity: (relativeDepth: number, override?: number) => number;
+    isRelated: (arc: ArcDatum) => boolean;
+    isDescendant: (arc: ArcDatum, ancestorId: string) => boolean;
+    enterTransition?: Transition;
+    enterStaggerScale: number;
+    playKey: number;
+    hoverPop: number;
+    maxExpandedThickness: number;
+    containerRef: RefObject<HTMLDivElement | null>;
+}
+export type SunburstContextValue = SunburstStableContextValue & SunburstHoverContextValue;
+export declare function SunburstProvider({ children, value, }: {
+    children: ReactNode;
+    value: SunburstContextValue;
+}): import("react").JSX.Element;
+export declare function useSunburstStable(): SunburstStableContextValue;
+export declare function useSunburstHover(): SunburstHoverContextValue;
+//# sourceMappingURL=sunburst-context.d.ts.map

package/dist/charts/sunburst-context.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+export const sunburstCssVars = {
+    background: "var(--chart-background)",
+    foreground: "var(--chart-foreground)",
+    foregroundMuted: "var(--chart-foreground-muted)",
+    label: "var(--chart-label)",
+    ring: "var(--chart-background)",
+    slice1: "var(--chart-1)",
+    slice2: "var(--chart-2)",
+    slice3: "var(--chart-3)",
+    slice4: "var(--chart-4)",
+    slice5: "var(--chart-5)",
+};
+export const defaultSunburstColors = [
+    sunburstCssVars.slice1,
+    sunburstCssVars.slice2,
+    sunburstCssVars.slice3,
+    sunburstCssVars.slice4,
+    sunburstCssVars.slice5,
+];
+const OPACITY_STEP = 0.15;
+const OPACITY_FLOOR = 0.45;
+/** Relative depth within the current focus view (1 = innermost visible ring). */
+export function opacityForRelativeDepth(relativeDepth) {
+    if (relativeDepth <= 1) {
+        return 1;
+    }
+    return Math.max(OPACITY_FLOOR, 1 - (relativeDepth - 1) * OPACITY_STEP);
+}
+const SunburstStableContext = createContext(null);
+const SunburstHoverContext = createContext(null);
+export function SunburstProvider({ children, value, }) {
+    const stable = useMemo(() => ({
+        data: value.data,
+        arcs: value.arcs,
+        focusById: value.focusById,
+        rootId: value.rootId,
+        maxDepth: value.maxDepth,
+        radius: value.radius,
+        size: value.size,
+        focus: value.focus,
+        prevFocus: value.prevFocus,
+        focusId: value.focusId,
+        zoomTo: value.zoomTo,
+        zoomT: value.zoomT,
+        enterTiming: value.enterTiming,
+        skipEnterAnimation: value.skipEnterAnimation,
+        growAmountForArc: value.growAmountForArc,
+        getColor: value.getColor,
+        getFill: value.getFill,
+        getFillOpacity: value.getFillOpacity,
+        isRelated: value.isRelated,
+        isDescendant: value.isDescendant,
+        enterTransition: value.enterTransition,
+        enterStaggerScale: value.enterStaggerScale,
+        playKey: value.playKey,
+        hoverPop: value.hoverPop,
+        maxExpandedThickness: value.maxExpandedThickness,
+        containerRef: value.containerRef,
+    }), [
+        value.data,
+        value.arcs,
+        value.focusById,
+        value.rootId,
+        value.maxDepth,
+        value.radius,
+        value.size,
+        value.focus,
+        value.prevFocus,
+        value.focusId,
+        value.zoomTo,
+        value.zoomT,
+        value.enterTiming,
+        value.skipEnterAnimation,
+        value.growAmountForArc,
+        value.getColor,
+        value.getFill,
+        value.getFillOpacity,
+        value.isRelated,
+        value.isDescendant,
+        value.enterTransition,
+        value.enterStaggerScale,
+        value.playKey,
+        value.hoverPop,
+        value.maxExpandedThickness,
+        value.containerRef,
+    ]);
+    const hover = useMemo(() => ({
+        hoveredArcIndex: value.hoveredArcIndex,
+        setHoveredArcIndex: value.setHoveredArcIndex,
+        hoveredArc: value.hoveredArc,
+        setHoveredArc: value.setHoveredArc,
+    }), [value.hoveredArcIndex, value.setHoveredArcIndex, value.hoveredArc, value.setHoveredArc]);
+    return (_jsx(SunburstStableContext.Provider, { value: stable, children: _jsx(SunburstHoverContext.Provider, { value: hover, children: children }) }));
+}
+export function useSunburstStable() {
+    const ctx = useContext(SunburstStableContext);
+    if (!ctx) {
+        throw new Error("useSunburstStable must be used within SunburstChart");
+    }
+    return ctx;
+}
+export function useSunburstHover() {
+    const ctx = useContext(SunburstHoverContext);
+    if (!ctx) {
+        throw new Error("useSunburstHover must be used within SunburstChart");
+    }
+    return ctx;
+}
+//# sourceMappingURL=sunburst-context.js.map