@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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,145 @@ 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;
+/** 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, TOOLTIP_ENTER_TRANSITION, TOOLTIP_EXIT_TRANSITION, barEntranceTransition, dotEntranceTransition, getSpringAnimation, getStaggerDelay, riseTransition, stackedSegmentTransition };

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

@@ -0,0 +1,109 @@
+/**
+ * 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;
+    /**
+     * Whether hover/focus gets the premium emphasis (glow ring + colored stroke + the
+     * stronger sibling dim). Defaults to `isGradientVariant`, since for column bars the
+     * two travel together — so BarChart and ComboChart are unaffected.
+     *
+     * Pass it explicitly for a chart whose fills are flat but which still wants the
+     * premium hover (HorizontalBarChart). The two really are separate axes: "how the bar
+     * is painted" vs "how it responds to hover".
+     */
+    premiumEmphasis?: 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, premiumEmphasis, }: 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.
+ *
+ * `showRestingStroke` (default `true`) keeps the resting white hairline that gradient
+ * column bars carry. Set it `false` for bars that should read as flat shapes with no
+ * outline at rest — the focus and emphasis strokes still apply, so keyboard focus stays
+ * visible either way. Prefer this flag over re-deriving the cascade at a call site:
+ * the two hand-copies of this logic drifted once already (§19).
+ */
+export declare function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, showRestingStroke, }: {
+    isFocused: boolean;
+    isEmphasized: boolean;
+    isGradientVariant: boolean;
+    fillColor: string;
+    showRestingStroke?: boolean;
+}): {
+    stroke: string;
+    strokeWidth: number | undefined;
+    strokeOpacity: number;
+};
+/**
+ * The hover glow-ring filter alone. Split out of `BarSeriesDefs` so a chart with FLAT
+ * fills can still render the premium hover ring without emitting a gradient def it
+ * never references — `BarSeriesDefs` composes it, so both paths stay single-sourced
+ * and the ring can't drift between them.
+ */
+export declare const BarRingDef: React.FC<{
+    ringId: string;
+    color: string;
+}>;
+/**
+ * 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,85 @@
+"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, premiumEmphasis = isGradientVariant, }) {
+    return {
+        isEmphasized: premiumEmphasis && (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.
+ *
+ * `showRestingStroke` (default `true`) keeps the resting white hairline that gradient
+ * column bars carry. Set it `false` for bars that should read as flat shapes with no
+ * outline at rest — the focus and emphasis strokes still apply, so keyboard focus stays
+ * visible either way. Prefer this flag over re-deriving the cascade at a call site:
+ * the two hand-copies of this logic drifted once already (§19).
+ */
+function barStrokeStyle({ isFocused, isEmphasized, isGradientVariant, fillColor, showRestingStroke = true, }) {
+    const hasRestingStroke = isGradientVariant && showRestingStroke;
+    return {
+        stroke: isFocused
+            ? "var(--color-primary)"
+            : isEmphasized
+                ? fillColor
+                : hasRestingStroke
+                    ? BAR_RESTING_STROKE
+                    : "none",
+        strokeWidth: isFocused ? 3 : isEmphasized ? 2 : hasRestingStroke ? 1 : undefined,
+        strokeOpacity: isEmphasized ? BAR_EMPHASIS_STROKE_OPACITY : 1,
+    };
+}
+/**
+ * The hover glow-ring filter alone. Split out of `BarSeriesDefs` so a chart with FLAT
+ * fills can still render the premium hover ring without emitting a gradient def it
+ * never references — `BarSeriesDefs` composes it, so both paths stay single-sourced
+ * and the ring can't drift between them.
+ */
+const BarRingDef = ({ ringId, color, }) => (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" })] }));
+/**
+ * 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" }) }), jsx(BarRingDef, { ringId: ringId, color: color })] }));
+/**
+ * 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, BarRingDef, 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/charts/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { resolveSeriesColor } from "./series-color";
 export { extractFillClass, extractStrokeClass, colorClassToVariable, combineClasses, createColorClass, generateSeriesColors, DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, generateColorPalette, getContrastColor, } from './color-utils';
 export { SafeMath, validateChart, validateChartData, validateChartConfig, validateDataConfigCompatibility, sanitizeChartData, calculateSafeScaleRange, niceNum, generateNiceTicks, type ChartValidationError, type ChartValidationResult, } from './chart-validation';
 export { getSpringAnimation, getUseSpringConfig, getStaggerDelay, SPRING_PRESETS, CIRCULAR_CHART_ANIMATIONS, type SpringConfig, type NoAnimationConfig, type AnimationPreset, } from './animation-utils';

package/dist/components/charts/utils/series-color.d.ts

@@ -0,0 +1,7 @@
+import type { ChartConfig } from "../types/chart.types";
+/**
+ * Resolves the paint color for series `key` at position `index`.
+ * Priority: explicit config[key].color (preserving the bare-token DX,
+ * e.g. "success" -> "var(--color-success)"), then palette[index % length].
+ */
+export declare function resolveSeriesColor(index: number, key: string | undefined, config: ChartConfig | undefined, palette: readonly string[]): string;

package/dist/components/charts/utils/series-color.js

@@ -0,0 +1,20 @@
+/**
+ * Resolves the paint color for series `key` at position `index`.
+ * Priority: explicit config[key].color (preserving the bare-token DX,
+ * e.g. "success" -> "var(--color-success)"), then palette[index % length].
+ */
+function resolveSeriesColor(index, key, config, palette) {
+    var _a;
+    const raw = key ? (_a = config === null || config === void 0 ? void 0 : config[key]) === null || _a === void 0 ? void 0 : _a.color : undefined;
+    if (raw) {
+        const isBareToken = !raw.startsWith("var(") &&
+            !raw.startsWith("#") &&
+            !raw.startsWith("rgb") &&
+            !raw.startsWith("hsl") &&
+            raw.includes("-");
+        return isBareToken ? `var(--color-${raw})` : raw;
+    }
+    return palette.length > 0 ? palette[index % palette.length] : "var(--color-chart-1)";
+}
+
+export { resolveSeriesColor };

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

@@ -1,8 +1,13 @@
-import { Variants } from 'motion/react';
+import type { Variants } from 'motion/react';
 /**
  * Accordion animation variants for smooth, staggered open/close transitions
  */
 export declare const accordionAnimations: Variants;
+/**
+ * Factory for trigger icon rotation variants.
+ * @param rotation - Degrees to rotate when open (e.g. 45 for PlusIcon, 180 for chevron)
+ */
+export declare const createTriggerIconVariants: (rotation: number) => Variants;
 /**
  * Content animation variants for subtle slide-in effect after container expands
  */

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

@@ -19,6 +19,20 @@ const accordionAnimations = {
         }
     }
 };
+/**
+ * Factory for trigger icon rotation variants.
+ * @param rotation - Degrees to rotate when open (e.g. 45 for PlusIcon, 180 for chevron)
+ */
+const createTriggerIconVariants = (rotation) => ({
+    closed: {
+        rotate: 0,
+        transition: { duration: 0.2, ease: [0.4, 0.0, 0.2, 1] },
+    },
+    open: {
+        rotate: rotation,
+        transition: { duration: 0.2, ease: [0.4, 0.0, 0.2, 1] },
+    },
+});
 /**
  * Content animation variants for subtle slide-in effect after container expands
  */
@@ -42,4 +56,4 @@ const accordionContentAnimations = {
     }
 };
 
-export { accordionAnimations, accordionContentAnimations };
+export { accordionAnimations, accordionContentAnimations, createTriggerIconVariants };

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

@@ -1,11 +1,11 @@
 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>>;
     Trigger: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionBodyProps & 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 { AccordionContent } from './AccordionContent.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,29 +25,36 @@ 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
 const Accordion = Object.assign(AccordionRoot, {
     Item: AccordionItem,
     Trigger: AccordionTrigger,
-    Content: AccordionContent,
+    Body: AccordionBody,
 });
 
-export { Accordion, useAccordionContext };
+export { Accordion };

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

@@ -2,8 +2,8 @@ export interface AccordionTheme {
     baseStyle: string;
     baseStyleStacked: string;
     triggerStyle: string;
-    contentStyle: string;
-    contentInnerStyle: string;
+    bodyStyle: string;
+    bodyInnerStyle: string;
     itemStyle: string;
     itemStyleStacked: string;
 }

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

@@ -4,15 +4,15 @@ const accordionTheme = {
     // Base container styles for stacked variant (unified card)
     baseStyleStacked: "w-full border border-[var(--color-border)] rounded-[var(--form-radius)] overflow-hidden",
     // Item styles for separated variant (individual cards with spacing)
-    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-white dark:bg-[var(--color-background-secondary)] overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-xs",
+    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-[var(--color-surface)] overflow-hidden mb-2 last-of-type:mb-0",
     // Item styles for stacked variant (shared borders, no spacing)
-    itemStyleStacked: "bg-white border-t border-[var(--color-border)] first-of-type:border-t-0",
+    itemStyleStacked: "bg-[var(--color-surface)] border-t border-[var(--color-border)] first-of-type:border-t-0",
     // Trigger styles (shared across variants)
-    triggerStyle: "flex w-full gap-3 items-center justify-between px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] [&[data-state=open]>svg]:rotate-180 cursor-pointer focus:outline-none transition-all flex justify-between",
-    // Content styles (shared across variants)
-    contentStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[500px] accordion-content overflow-hidden",
-    // Content inner wrapper styles
-    contentInnerStyle: "p-4 pb-2.5 pt-0",
+    triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] text-sm",
+    // Body styles (shared across variants)
+    bodyStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden text-sm",
+    // Body inner wrapper styles
+    bodyInnerStyle: "p-4 pb-2.5 pt-0",
 };
 
 export { accordionTheme };