@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.js

@@ -1,9 +1,11 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../../utils/cn.js';
 import { chartTooltipTheme } from './ChartTooltip.theme.js';
 import { useIsClient } from '../../../../hooks/useIsClient.js';
+import { TOOLTIP_EXIT_TRANSITION, TOOLTIP_ENTER_TRANSITION } from '../../utils/animation-utils.js';
 
 // Helper function to check if content is MultiSeriesData
 const isMultiSeriesData = (content) => {
@@ -22,22 +24,11 @@ function ChartTooltip({ content, className, active = false, position = { x: 0, y
             }, animate: {
                 opacity: 1,
                 scale: 1,
-                transition: {
-                    type: "spring",
-                    stiffness: 400,
-                    damping: 30,
-                    opacity: { duration: 0.15 },
-                    scale: { duration: 0.15 }
-                },
+                transition: TOOLTIP_ENTER_TRANSITION,
             }, exit: {
                 opacity: 0,
                 scale: 0.95,
-                transition: {
-                    type: "spring",
-                    stiffness: 300,
-                    damping: 25,
-                    duration: 0.15,
-                },
+                transition: TOOLTIP_EXIT_TRANSITION,
             }, className: cn(theme.baseStyle, className), style: {
                 left: position.x + 16,
                 top: position.y + 16,

package/dist/components/charts/shared/index.d.ts

@@ -5,10 +5,3 @@ export { HorizontalGrid } from './ChartGrid';
 export { ChartText } from './ChartText';
 export { XAxis, YAxis } from './ChartAxis';
 export { ChartTooltip } from './ChartTooltip';
-export { ChartContainer, useChartContext } from './ChartContainer';
-export type { ChartContainerProps, ChartDimensions, ChartMargins } from './ChartContainer';
-export { BarRenderer } from './BarRenderer';
-export type { BarRendererProps } from './BarRenderer';
-export { BAR_ANIMATION_TIMING } from './BarRenderer';
-export { LineRenderer } from './LineRenderer';
-export type { LineRendererProps } from './LineRenderer';

package/dist/components/charts/theme/chart.theme.js

@@ -68,6 +68,12 @@ const chartTheme = {
             ],
         },
     },
+    legend: {
+        container: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2 mb-3",
+        item: "flex items-center gap-2 text-sm",
+        dot: "size-2.5 rounded shrink-0",
+        label: "text-[var(--color-text-secondary)]",
+    },
 };
 
 export { chartTheme };

package/dist/components/charts/types/chart.types.d.ts

@@ -12,6 +12,8 @@ export interface ChartConfig {
 }
 export type ChartVariant = 'default' | 'minimal' | 'gradient';
 export type CurveType = 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
+/** `undefined` resolves to `'bottom'` for multi-series `config`, `'none'` for single-series. */
+export type ChartLegendPosition = 'top' | 'bottom' | 'none';
 export interface ChartThemeOverrides {
     baseStyle?: {
         colors?: Partial<{
@@ -80,6 +82,12 @@ export interface StandardChartDisplayProps {
     showGrid?: boolean;
     showXAxis?: boolean;
     showYAxis?: boolean;
+    /**
+     * Always-visible legend position, rendered from `config`'s labels/colors.
+     * Omitted resolves to `"bottom"` for multi-series `config`, `"none"` for
+     * single-series — there is no single fixed default.
+     */
+    legend?: ChartLegendPosition;
     minValue?: number;
     maxValue?: number;
     variant?: ChartVariant;
@@ -159,6 +167,13 @@ export interface ChartThemeConfig {
             colors: string[];
         };
     };
+    /** Shared `ChartLegend` styling — one place for every chart's legend. */
+    legend: {
+        container: string;
+        item: string;
+        dot: string;
+        label: string;
+    };
 }
 export interface ChartTheme {
     colors: {

package/dist/components/charts/utils/animation-utils.d.ts

@@ -3,7 +3,15 @@
  *
  * Provides shared spring animation presets and helper functions
  * to ensure consistent animations across all chart components.
+ *
+ * Two families live here:
+ *  - Circular/radar (DonutChart, ActivityRings, RadarChart) — spring presets +
+ *    `getSpringAnimation`/`getStaggerDelay` (below).
+ *  - Cartesian (Area/Bar/Line/StackedBar + the shared Bar/LineRenderer) — the
+ *    entrance + hover primitives at the bottom of this file. Keep all chart
+ *    animation values here so timing/feel can't drift between charts.
  */
+import type { Transition } from "motion/react";
 /**
  * Spring animation configuration
  */
@@ -99,6 +107,7 @@ export declare const CIRCULAR_CHART_ANIMATIONS: {
         readonly preset: AnimationPreset;
         readonly staggerDelay: 0.1;
         readonly centerLabelDelay: 0.3;
+        readonly centerLabelDuration: 0.4;
     };
     /**
      * GaugeChart: Bouncy animation for needle
@@ -108,4 +117,90 @@ export declare const CIRCULAR_CHART_ANIMATIONS: {
         readonly needleDelay: 0;
         readonly valueDelay: 0.3;
     };
+    /**
+     * MultiSegmentDonutChart: segments draw sequentially, each segment's draw
+     * duration proportional to its share (base = a full 100% segment, min keeps
+     * slivers visible).
+     */
+    readonly multiSegmentDonut: {
+        readonly preset: AnimationPreset;
+        readonly baseSegmentDuration: 0.6;
+        readonly minSegmentDuration: 0.15;
+    };
+};
+/** Crosshair group fade in/out (AnimatePresence enter/exit). */
+export declare const CROSSHAIR_FADE_TRANSITION: Transition;
+/** Crosshair line tracking the pointer between data points. */
+export declare const CROSSHAIR_FOLLOW_TRANSITION: Transition;
+/** Tooltip pop-in: springy position/scale with a quick opacity/scale settle. */
+export declare const TOOLTIP_ENTER_TRANSITION: Transition;
+/** Tooltip pop-out. */
+export declare const TOOLTIP_EXIT_TRANSITION: Transition;
+/** Circular-chart segment hover dim/lift (opacity fade + scale pop). */
+export declare const SEGMENT_HOVER_TRANSITION: Transition;
+/** Rise/draw duration for line & area entrances (and the shared LineRenderer). */
+export declare const CARTESIAN_ENTRANCE_DURATION = 0.7;
+/** Per-marker stagger for line/area dot pop-in (seconds). */
+export declare const LINE_DOT_STAGGER = 0.06;
+/** Grouped-bar stagger (BarChart + shared BarRenderer grouped path). */
+export declare const BAR_GROUP_STAGGER = 0.05;
+/** Stacked-bar per-category stagger (StackedBarChart). */
+export declare const STACKED_BAR_STAGGER = 0.08;
+/** Shared BarRenderer stacked-mode per-category delay. */
+export declare const BAR_STACK_CATEGORY_DELAY = 0.25;
+/** Shared BarRenderer stacked-mode per-segment stagger. */
+export declare const BAR_STACK_SEGMENT_STAGGER = 0.12;
+/** ScatterPlot per-point stagger + grow duration. */
+export declare const SCATTER_POINT_STAGGER = 0.01;
+export declare const SCATTER_POINT_DURATION = 0.3;
+/** Marker pop-in spring (line/area dots). */
+export declare const DOT_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+};
+/** Bar grow spring (grouped bars / stacked columns). */
+export declare const BAR_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
 };
+/**
+ * Transform-origin presets (passed to a motion element's `style`).
+ * `RISE_FROM_BASELINE` scales a group UP from the plot baseline — pair it with an
+ * invisible full-plot rect so the group's fill-box bottom pins to the x-axis.
+ * `SCALE_FROM_CENTER` scales an element in about its own centre (markers).
+ */
+export declare const RISE_FROM_BASELINE: {
+    readonly originY: 1;
+    readonly transformOrigin: "bottom";
+};
+export declare const SCALE_FROM_CENTER: {
+    readonly originX: "50%";
+    readonly originY: "50%";
+    readonly transformBox: "fill-box";
+};
+/** Line/area rise transition. */
+export declare const riseTransition: Transition;
+/** Hover glow-ring fade (bars). */
+export declare const RING_FADE_TRANSITION: Transition;
+/** Hover glow-halo fade (line/area active point). */
+export declare const HALO_FADE_TRANSITION: Transition;
+/**
+ * Marker pop-in that starts as the rise finishes, then staggers left-to-right.
+ * Reduced motion → no delay (markers just appear with the static line).
+ */
+export declare function dotEntranceTransition(index: number, shouldReduceMotion?: boolean | null): Transition;
+/**
+ * Bar grow transition. Opacity carries BOTH the mount fade (delayed to match the
+ * stagger so a scaleY≈0 bar isn't a visible stub) and the instant hover dim once
+ * mounted (`hasAnimated`). Used by BarChart, StackedBarChart, and the grouped
+ * path of the shared BarRenderer.
+ */
+export declare function barEntranceTransition(delay: number, hasAnimated: boolean): Transition;
+/**
+ * Stacked-segment grow for the shared BarRenderer (a tween, not a spring, so
+ * stacked segments settle together). Same delayed-opacity contract as
+ * `barEntranceTransition`.
+ */
+export declare function stackedSegmentTransition(delay: number, hasAnimated: boolean): Transition;

package/dist/components/charts/utils/animation-utils.js

@@ -3,6 +3,13 @@
  *
  * Provides shared spring animation presets and helper functions
  * to ensure consistent animations across all chart components.
+ *
+ * Two families live here:
+ *  - Circular/radar (DonutChart, ActivityRings, RadarChart) — spring presets +
+ *    `getSpringAnimation`/`getStaggerDelay` (below).
+ *  - Cartesian (Area/Bar/Line/StackedBar + the shared Bar/LineRenderer) — the
+ *    entrance + hover primitives at the bottom of this file. Keep all chart
+ *    animation values here so timing/feel can't drift between charts.
  */
 /**
  * Spring animation presets for circular charts
@@ -111,6 +118,147 @@ const CIRCULAR_CHART_ANIMATIONS = {
         preset: 'smooth',
         staggerDelay: 0.1,
         centerLabelDelay: 0.3,
-    }};
+        centerLabelDuration: 0.4,
+    },
+    /**
+     * MultiSegmentDonutChart: segments draw sequentially, each segment's draw
+     * duration proportional to its share (base = a full 100% segment, min keeps
+     * slivers visible).
+     */
+    multiSegmentDonut: {
+        preset: 'smooth',
+        baseSegmentDuration: 0.6,
+        minSegmentDuration: 0.15,
+    },
+};
+/* ──────────────────────────────────────────────────────────────────────────
+ * Shared hover/interaction overlays (crosshair, tooltip, segment hover)
+ * ────────────────────────────────────────────────────────────────────────── */
+/** Crosshair group fade in/out (AnimatePresence enter/exit). */
+const CROSSHAIR_FADE_TRANSITION = {
+    duration: 0.3,
+    ease: "easeInOut",
+};
+/** Crosshair line tracking the pointer between data points. */
+const CROSSHAIR_FOLLOW_TRANSITION = {
+    duration: 0.2,
+    ease: "easeOut",
+};
+/** Tooltip pop-in: springy position/scale with a quick opacity/scale settle. */
+const TOOLTIP_ENTER_TRANSITION = {
+    type: "spring",
+    stiffness: 400,
+    damping: 30,
+    opacity: { duration: 0.15 },
+    scale: { duration: 0.15 },
+};
+/** Tooltip pop-out. */
+const TOOLTIP_EXIT_TRANSITION = {
+    type: "spring",
+    stiffness: 300,
+    damping: 25,
+    duration: 0.15,
+};
+/** Circular-chart segment hover dim/lift (opacity fade + scale pop). */
+const SEGMENT_HOVER_TRANSITION = {
+    scale: { duration: 0.2 },
+    opacity: { duration: 0.2 },
+};
+/* ──────────────────────────────────────────────────────────────────────────
+ * Cartesian charts (Area / Bar / Line / StackedBar + shared Bar/LineRenderer)
+ *
+ * The entrance is a "rise from the x-axis" (scaleY 0→1 about the baseline) for
+ * lines/areas/bars, with markers popping in once the rise finishes. Hover adds a
+ * glow ring (bars) or glow halo (line/area). All timings live here so every
+ * Cartesian chart shares one feel — change a value once, not in six files.
+ * ────────────────────────────────────────────────────────────────────────── */
+/** Rise/draw duration for line & area entrances (and the shared LineRenderer). */
+const CARTESIAN_ENTRANCE_DURATION = 0.7;
+/** Per-marker stagger for line/area dot pop-in (seconds). */
+const LINE_DOT_STAGGER = 0.06;
+/** Grouped-bar stagger (BarChart + shared BarRenderer grouped path). */
+const BAR_GROUP_STAGGER = 0.05;
+/** Stacked-bar per-category stagger (StackedBarChart). */
+const STACKED_BAR_STAGGER = 0.08;
+/** Shared BarRenderer stacked-mode per-category delay. */
+const BAR_STACK_CATEGORY_DELAY = 0.25;
+/** Shared BarRenderer stacked-mode per-segment stagger. */
+const BAR_STACK_SEGMENT_STAGGER = 0.12;
+/** ScatterPlot per-point stagger + grow duration. */
+const SCATTER_POINT_STAGGER = 0.01;
+const SCATTER_POINT_DURATION = 0.3;
+/** Marker pop-in spring (line/area dots). */
+const DOT_SPRING = { type: "spring", stiffness: 260, damping: 20 };
+/** Bar grow spring (grouped bars / stacked columns). */
+const BAR_SPRING = { type: "spring", stiffness: 100, damping: 20 };
+/**
+ * Transform-origin presets (passed to a motion element's `style`).
+ * `RISE_FROM_BASELINE` scales a group UP from the plot baseline — pair it with an
+ * invisible full-plot rect so the group's fill-box bottom pins to the x-axis.
+ * `SCALE_FROM_CENTER` scales an element in about its own centre (markers).
+ */
+const RISE_FROM_BASELINE = { originY: 1, transformOrigin: "bottom" };
+const SCALE_FROM_CENTER = {
+    originX: "50%",
+    originY: "50%",
+    transformBox: "fill-box",
+};
+/** Line/area rise transition. */
+const riseTransition = {
+    duration: CARTESIAN_ENTRANCE_DURATION,
+    ease: "easeOut",
+};
+/** Hover glow-ring fade (bars). */
+const RING_FADE_TRANSITION = {
+    opacity: { duration: 0.45, ease: "easeOut" },
+};
+/** Hover glow-halo fade (line/area active point). */
+const HALO_FADE_TRANSITION = { duration: 0.22, ease: "easeOut" };
+/**
+ * Marker pop-in that starts as the rise finishes, then staggers left-to-right.
+ * Reduced motion → no delay (markers just appear with the static line).
+ */
+function dotEntranceTransition(index, shouldReduceMotion) {
+    return {
+        delay: shouldReduceMotion ? 0 : CARTESIAN_ENTRANCE_DURATION + index * LINE_DOT_STAGGER,
+        ...DOT_SPRING,
+    };
+}
+/**
+ * Bar grow transition. Opacity carries BOTH the mount fade (delayed to match the
+ * stagger so a scaleY≈0 bar isn't a visible stub) and the instant hover dim once
+ * mounted (`hasAnimated`). Used by BarChart, StackedBarChart, and the grouped
+ * path of the shared BarRenderer.
+ */
+function barEntranceTransition(delay, hasAnimated) {
+    return {
+        ...BAR_SPRING,
+        delay,
+        opacity: {
+            type: "tween",
+            duration: 0.25,
+            ease: "easeOut",
+            delay: hasAnimated ? 0 : delay,
+        },
+    };
+}
+/**
+ * Stacked-segment grow for the shared BarRenderer (a tween, not a spring, so
+ * stacked segments settle together). Same delayed-opacity contract as
+ * `barEntranceTransition`.
+ */
+function stackedSegmentTransition(delay, hasAnimated) {
+    return {
+        duration: 0.4,
+        ease: "easeOut",
+        delay,
+        opacity: {
+            type: "tween",
+            duration: 0.25,
+            ease: "easeOut",
+            delay: hasAnimated ? 0 : delay,
+        },
+    };
+}
 
-export { CIRCULAR_CHART_ANIMATIONS, SPRING_PRESETS, getSpringAnimation, getStaggerDelay };
+export { BAR_GROUP_STAGGER, BAR_SPRING, BAR_STACK_CATEGORY_DELAY, BAR_STACK_SEGMENT_STAGGER, CARTESIAN_ENTRANCE_DURATION, CIRCULAR_CHART_ANIMATIONS, CROSSHAIR_FADE_TRANSITION, CROSSHAIR_FOLLOW_TRANSITION, DOT_SPRING, HALO_FADE_TRANSITION, LINE_DOT_STAGGER, RING_FADE_TRANSITION, RISE_FROM_BASELINE, SCALE_FROM_CENTER, SCATTER_POINT_DURATION, SCATTER_POINT_STAGGER, SEGMENT_HOVER_TRANSITION, SPRING_PRESETS, STACKED_BAR_STAGGER, TOOLTIP_ENTER_TRANSITION, TOOLTIP_EXIT_TRANSITION, barEntranceTransition, dotEntranceTransition, getSpringAnimation, getStaggerDelay, riseTransition, stackedSegmentTransition };

package/dist/components/charts/utils/bar-emphasis.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Shared "premium bar" emphasis styling — the single source of truth for the
+ * gradient-variant bar look used by BarChart and ComboChart's BarRenderer:
+ * per-series vertical gradient fill, colored drop shadow, hover glow ring,
+ * hover/focus emphasis stroke, and the dim applied to non-hovered siblings.
+ *
+ * Both charts MUST render bars through these constants/helpers rather than
+ * hand-copying values — the two copies drifted once already (BarRenderer's
+ * emphasis missed keyboard focus), which is how this module came to exist.
+ */
+import React from "react";
+/** Hover dim on non-hovered bars while a sibling is hovered. */
+export declare const BAR_DIM_OPACITY_GRADIENT = 0.42;
+export declare const BAR_DIM_OPACITY_FLAT = 0.9;
+/** Resting hairline stroke on gradient bars. */
+export declare const BAR_RESTING_STROKE = "rgba(255,255,255,0.24)";
+/** Emphasized (hover/focus) series-colored stroke. */
+export declare const BAR_EMPHASIS_STROKE_OPACITY = 0.78;
+/** Hover glow ring stroke. */
+export declare const BAR_RING_STROKE_OPACITY = 0.24;
+/** Glow-ring stroke width scales with the bar, clamped to a sane band. */
+export declare function barRingStrokeWidth(barWidth: number): number;
+export interface BarEmphasisInput {
+    isHovered: boolean;
+    isFocused: boolean;
+    isAnyBarHovered: boolean;
+    isGradientVariant: boolean;
+}
+export interface BarEmphasisState {
+    /** Hover OR keyboard focus, gradient variant only — drives ring + stroke. */
+    isEmphasized: boolean;
+    /** A sibling is hovered and this bar isn't — drives the dim. */
+    shouldReduceOpacity: boolean;
+}
+export declare function deriveBarEmphasis({ isHovered, isFocused, isAnyBarHovered, isGradientVariant, }: BarEmphasisInput): BarEmphasisState;
+/**
+ * Animated hover-dim opacity. Belongs in the motion `animate` prop, not
+ * `style` — motion.path freezes plain style values at mount.
+ */
+export declare function barDimOpacity(shouldReduceOpacity: boolean, isGradientVariant: boolean): number;
+/** Bar fill: gradient › placeholder/dimmed sunken › series color. */
+export declare function barFill({ isGradientVariant, gradientFill, isNull, shouldReduceOpacity, fillColor, }: {
+    isGradientVariant: boolean;
+    gradientFill: string;
+    isNull: boolean;
+    shouldReduceOpacity: boolean;
+    fillColor: string;
+}): string;
+/** Stroke cascade: keyboard-focus ring › emphasis › resting hairline › none. */
+export declare function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, }: {
+    isFocused: boolean;
+    isEmphasized: boolean;
+    isGradientVariant: boolean;
+    fillColor: string;
+}): {
+    stroke: string;
+    strokeWidth: number | undefined;
+    strokeOpacity: number;
+};
+/**
+ * Per-series SVG defs for the gradient variant: vertical gradient fill,
+ * colored drop shadow, and the hover glow-ring filter. Render inside <defs>.
+ */
+export declare const BarSeriesDefs: React.FC<{
+    gradientId: string;
+    shadowId: string;
+    ringId: string;
+    color: string;
+}>;
+/**
+ * Hover/focus glow ring behind an emphasized bar. Mount/unmount it via
+ * `show` — enter/exit fades are handled internally.
+ */
+export declare const BarGlowRing: React.FC<{
+    show: boolean;
+    pathD: string;
+    color: string;
+    barWidth: number;
+    filter: string;
+}>;

package/dist/components/charts/utils/bar-emphasis.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { AnimatePresence, motion } from 'motion/react';
+import { RING_FADE_TRANSITION } from './animation-utils.js';
+
+/** Hover dim on non-hovered bars while a sibling is hovered. */
+const BAR_DIM_OPACITY_GRADIENT = 0.42;
+const BAR_DIM_OPACITY_FLAT = 0.9;
+/** Resting hairline stroke on gradient bars. */
+const BAR_RESTING_STROKE = "rgba(255,255,255,0.24)";
+/** Emphasized (hover/focus) series-colored stroke. */
+const BAR_EMPHASIS_STROKE_OPACITY = 0.78;
+/** Hover glow ring stroke. */
+const BAR_RING_STROKE_OPACITY = 0.24;
+/** Glow-ring stroke width scales with the bar, clamped to a sane band. */
+function barRingStrokeWidth(barWidth) {
+    return Math.min(14, Math.max(8, barWidth * 0.08));
+}
+function deriveBarEmphasis({ isHovered, isFocused, isAnyBarHovered, isGradientVariant, }) {
+    return {
+        isEmphasized: isGradientVariant && (isHovered || isFocused),
+        shouldReduceOpacity: isAnyBarHovered && !isHovered,
+    };
+}
+/**
+ * Animated hover-dim opacity. Belongs in the motion `animate` prop, not
+ * `style` — motion.path freezes plain style values at mount.
+ */
+function barDimOpacity(shouldReduceOpacity, isGradientVariant) {
+    return shouldReduceOpacity
+        ? isGradientVariant
+            ? BAR_DIM_OPACITY_GRADIENT
+            : BAR_DIM_OPACITY_FLAT
+        : 1;
+}
+/** Bar fill: gradient › placeholder/dimmed sunken › series color. */
+function barFill({ isGradientVariant, gradientFill, isNull, shouldReduceOpacity, fillColor, }) {
+    return isGradientVariant
+        ? gradientFill
+        : isNull || shouldReduceOpacity
+            ? "var(--color-surface-sunken)"
+            : fillColor;
+}
+/** Stroke cascade: keyboard-focus ring › emphasis › resting hairline › none. */
+function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, }) {
+    return {
+        stroke: isFocused
+            ? "var(--color-primary)"
+            : isEmphasized
+                ? fillColor
+                : isGradientVariant
+                    ? BAR_RESTING_STROKE
+                    : "none",
+        strokeWidth: isFocused ? 3 : isEmphasized ? 2 : isGradientVariant ? 1 : undefined,
+        strokeOpacity: isEmphasized ? BAR_EMPHASIS_STROKE_OPACITY : 1,
+    };
+}
+/**
+ * Per-series SVG defs for the gradient variant: vertical gradient fill,
+ * colored drop shadow, and the hover glow-ring filter. Render inside <defs>.
+ */
+const BarSeriesDefs = ({ gradientId, shadowId, ringId, color }) => (jsxs(Fragment, { children: [jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.46" }), jsx("stop", { offset: "14%", stopColor: color, stopOpacity: "0.9" }), jsx("stop", { offset: "42%", stopColor: color, stopOpacity: "1" }), jsx("stop", { offset: "72%", stopColor: color, stopOpacity: "0.96" }), jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.82" })] }), jsx("filter", { id: shadowId, x: "-35%", y: "-35%", width: "170%", height: "190%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.22" }) }), jsxs("filter", { id: ringId, x: "-25%", y: "-25%", width: "150%", height: "165%", colorInterpolationFilters: "sRGB", children: [jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "4", floodColor: color, floodOpacity: "0.42" }), jsx("feDropShadow", { dx: "0", dy: "10", stdDeviation: "8", floodColor: color, floodOpacity: "0.18" })] })] }));
+/**
+ * Hover/focus glow ring behind an emphasized bar. Mount/unmount it via
+ * `show` — enter/exit fades are handled internally.
+ */
+const BarGlowRing = ({ show, pathD, color, barWidth, filter }) => (jsx(AnimatePresence, { children: show && (jsx(motion.path, { d: pathD, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: RING_FADE_TRANSITION, fill: "none", stroke: color, strokeWidth: barRingStrokeWidth(barWidth), strokeOpacity: BAR_RING_STROKE_OPACITY, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", filter: filter, style: { pointerEvents: "none" } })) }));
+
+export { BAR_DIM_OPACITY_FLAT, BAR_DIM_OPACITY_GRADIENT, BAR_EMPHASIS_STROKE_OPACITY, BAR_RESTING_STROKE, BAR_RING_STROKE_OPACITY, BarGlowRing, BarSeriesDefs, barDimOpacity, barFill, barRingStrokeWidth, barStrokeStyle, deriveBarEmphasis };

package/dist/components/charts/utils/chart-validation.js

@@ -158,6 +158,13 @@ function validateChartConfig(config) {
 function validateDataConfigCompatibility(data, config) {
     const errors = [];
     const warnings = [];
+    // Empty data has no rows to check config keys against — that's a valid
+    // "nothing to plot yet" state (handled by each chart's own empty-state
+    // branch), NOT an incompatible-config error. Only non-empty data with zero
+    // matching numeric keys is a real compatibility error.
+    if (data.length === 0) {
+        return { isValid: true, errors, warnings };
+    }
     const configKeys = Object.keys(config);
     const dataKeys = data.length > 0 ? Object.keys(data[0]) : [];
     // Check if any config keys exist in data

package/dist/components/core/Accordion/Accordion.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { AccordionProps, AccordionContextValue } from "./Accordion.types";
-export declare const useAccordionContext: () => AccordionContextValue;
+import { AccordionProps } from "./Accordion.types";
+export { useAccordionContext } from "./AccordionContext";
 export declare const Accordion: {
-    ({ children, className, type, variant, collapsible, defaultValue, value, onValueChange, theme: themeOverrides, darkMode, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, items, className, type, variant, collapsible, defaultValue, value, onValueChange, theme: themeOverrides, darkMode, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Item: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Accordion/Accordion.js

@@ -1,20 +1,17 @@
-import { jsx } from 'react/jsx-runtime';
-import { useContext, createContext, useState, useCallback } from 'react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useState, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { accordionTheme } from './Accordion.theme.js';
+import { AccordionContext } from './AccordionContext.js';
+export { useAccordionContext } from './AccordionContext.js';
 import { AccordionTrigger } from './AccordionTrigger.js';
 import { AccordionBody } from './AccordionBody.js';
 import { AccordionItem } from './AccordionItem.js';
 
-// Create context for the main Accordion component
-const AccordionContext = createContext(undefined);
-const useAccordionContext = () => {
-    const ctx = useContext(AccordionContext);
-    if (!ctx)
-        throw new Error("Accordion compound components must be used within <Accordion>");
-    return ctx;
-};
-const AccordionRoot = ({ children, className, type = "single", variant = "separated", collapsible = false, defaultValue, value, onValueChange, theme: themeOverrides, darkMode = false, ...props }) => {
+/** Render one data-driven item to the compound Accordion primitives. */
+const renderItemData = (item) => (jsxs(AccordionItem, { value: item.value, className: item.className, disabled: item.disabled, children: [jsx(AccordionTrigger, { children: item.title }), jsx(AccordionBody, { children: item.content })] }, item.value));
+const AccordionRoot = ({ children, items, className, type = "single", variant = "separated", collapsible = false, defaultValue, value, onValueChange, theme: themeOverrides, darkMode = false, ...props }) => {
     // State for uncontrolled component
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || (type === "single" ? "" : []));
     // Determine if component is controlled
@@ -28,22 +25,29 @@ const AccordionRoot = ({ children, className, type = "single", variant = "separa
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
     }, [isControlled, onValueChange]);
     // Merge theme with any overrides
-    const theme = {
+    const theme = useMemo(() => ({
         ...accordionTheme,
         ...(themeOverrides || {}),
-    };
+    }), [themeOverrides]);
     // Context value to be provided to children
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         type,
         variant,
         collapsible,
         value: currentValue,
         onValueChange: handleValueChange,
         theme,
-    };
+    }), [type, variant, collapsible, currentValue, handleValueChange, theme]);
     // Select base style based on variant
     const baseStyleClass = variant === "stacked" ? theme.baseStyleStacked : theme.baseStyle;
-    return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx("div", { className: cn(baseStyleClass, darkMode && "dark", className), "data-variant": variant, ...props, children: children }) }));
+    if (process.env.NODE_ENV !== "production" &&
+        items &&
+        React__default.Children.count(children) > 0) {
+        console.warn("[Accordion]: both `items` and children were provided — `items` takes precedence and children are ignored.");
+    }
+    // Data-driven path maps to the same compound primitives as composition.
+    const content = items ? items.map(renderItemData) : children;
+    return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx("div", { className: cn(baseStyleClass, darkMode && "dark", className), "data-variant": variant, ...props, children: content }) }));
 };
 AccordionRoot.displayName = "Accordion";
 // Attach compound subcomponents
@@ -53,4 +57,4 @@ const Accordion = Object.assign(AccordionRoot, {
     Body: AccordionBody,
 });
 
-export { Accordion, useAccordionContext };
+export { Accordion };