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

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.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-white dark:bg-[var(--color-background-secondary)] 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",
     // 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 };

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

@@ -31,7 +31,16 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
      * Theme overrides
      */
     theme?: AccordionThemeOverrides;
-    children: React.ReactNode;
+    /**
+     * `Accordion.Item` children (compound API). Optional when `items` is used.
+     */
+    children?: React.ReactNode;
+    /**
+     * Data-driven items. When provided, the accordion renders from this array and
+     * any `children` are ignored (dev-warns). Omit it to use the compound API.
+     * Fully serializable (resolve rich content upstream) — ideal for generative UI.
+     */
+    items?: AccordionItemData[];
     /**
      * Force dark mode styling for the component. Use when placing the component
      * on a dark background while the page is in light mode. This applies the
@@ -53,7 +62,8 @@ export interface AccordionContextValue {
     theme: AccordionThemeOverrides & {
         baseStyle: string;
         triggerStyle: string;
-        contentStyle: string;
+        bodyStyle: string;
+        bodyInnerStyle: string;
     };
 }
 /**
@@ -64,6 +74,14 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
      * Unique value for the accordion item
      */
     value: string;
+    /**
+     * Disables this item: the trigger becomes a native disabled button (dimmed,
+     * unfocusable, un-clickable) and roving arrow-key navigation skips it.
+     * Does not force-close the item if it's already open (e.g. via a controlled
+     * `value` that still includes it).
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Optional className for styling
      */
@@ -73,12 +91,29 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
      */
     children: React.ReactNode;
 }
+/**
+ * A single accordion entry for the data-driven (`items`) API. Maps internally to
+ * `Accordion.Item` / `Accordion.Trigger` / `Accordion.Body`.
+ */
+export interface AccordionItemData {
+    /** Unique value for the accordion item (stable identity, matches Accordion.Item) */
+    value: string;
+    /** Trigger content (maps to the Accordion.Trigger children) */
+    title: React.ReactNode;
+    /** Body content (maps to the Accordion.Body children) */
+    content?: React.ReactNode;
+    /** Optional className forwarded to the item wrapper */
+    className?: string;
+    /** Disables this item (maps to `Accordion.Item`'s `disabled`) */
+    disabled?: boolean;
+}
 /**
  * AccordionItem context value - to be used by Trigger and Content
  */
 export interface AccordionItemContextValue {
     value: string;
     isOpen: boolean;
+    disabled: boolean;
     toggle: () => void;
     triggerId: string;
     contentId: string;
@@ -89,11 +124,33 @@ export interface AccordionItemContextValue {
 export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
     className?: string;
+    /**
+     * Override the default indicator (chevron) icon.
+     * Set to `null` to hide it entirely.
+     */
+    chevron?: React.ReactNode | null;
+    /**
+     * Rotation degrees applied to the chevron icon when open.
+     * Default: 45 (for PlusIcon). Use 180 for a chevron-down, 90 for a right-arrow, 0 for none.
+     */
+    chevronRotation?: number;
+    /**
+     * Position of the chevron icon.
+     * - `"right"` (default): pushed to the far right after children.
+     * - `"left"`: appears before children.
+     * No effect when `chevron` is explicitly provided.
+     * @default "right"
+     */
+    chevronPosition?: "left" | "right";
+    /**
+     * @deprecated Use `chevronRotation` instead.
+     */
+    iconRotation?: number;
 }
 /**
- * Content props
+ * Body props
  */
-export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface AccordionBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
 }
@@ -104,7 +161,8 @@ export interface AccordionThemeOverrides {
     baseStyle?: string;
     baseStyleStacked?: string;
     triggerStyle?: string;
-    contentStyle?: string;
+    bodyStyle?: string;
+    bodyInnerStyle?: string;
     itemStyle?: string;
     itemStyleStacked?: string;
 }

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { AccordionBodyProps } from "./Accordion.types";
+export declare const AccordionBody: React.ForwardRefExoticComponent<AccordionBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Accordion/{AccordionContent.js → AccordionBody.js}

@@ -1,12 +1,13 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useAccordionContext } from './Accordion.js';
+import { useAccordionContext } from './AccordionContext.js';
 import { useAccordionItemContext } from './AccordionItem.js';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { accordionAnimations, accordionContentAnimations } from './Accordion.animations.js';
 
-const AccordionContent = React__default.forwardRef(({ children, className, ...rest }, ref) => {
+const AccordionBody = React__default.forwardRef(({ children, className, ...rest }, ref) => {
     const { theme } = useAccordionContext();
     const { isOpen, contentId, triggerId } = useAccordionItemContext();
     const shouldReduceMotion = useReducedMotion();
@@ -14,8 +15,8 @@ const AccordionContent = React__default.forwardRef(({ children, className, ...re
     const instantTransition = shouldReduceMotion ? { duration: 0 } : undefined;
     // Filter out conflicting props to avoid type issues
     const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, onTransitionEnd, onTransitionStart, ...safeProps } = rest;
-    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { ref: ref, id: contentId, role: "region", "aria-labelledby": triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.contentStyle, className), "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, ...safeProps, children: jsx(motion.div, { className: "p-4 pt-0", variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed", transition: instantTransition, children: children }) })) }));
+    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { ref: ref, id: contentId, role: "region", "aria-labelledby": triggerId, className: theme === null || theme === void 0 ? void 0 : theme.bodyStyle, "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, ...safeProps, children: jsx(motion.div, { className: cn(theme === null || theme === void 0 ? void 0 : theme.bodyInnerStyle, className), variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed", transition: instantTransition, children: children }) })) }));
 });
-AccordionContent.displayName = "AccordionContent";
+AccordionBody.displayName = "Accordion.Body";
 
-export { AccordionContent };
+export { AccordionBody };

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

@@ -0,0 +1,3 @@
+import { AccordionContextValue } from "./Accordion.types";
+export declare const AccordionContext: import("react").Context<AccordionContextValue | undefined>;
+export declare const useAccordionContext: () => AccordionContextValue;

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

@@ -0,0 +1,15 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+// Lives in its own module (not Accordion.tsx) so sub-components can consume the
+// context without importing Accordion.tsx, which imports them back — that was
+// the library's one circular dependency.
+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;
+};
+
+export { AccordionContext, useAccordionContext };

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default, { createContext, useContext } from 'react';
+import React__default, { createContext, useCallback, useMemo, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useAccordionContext } from './Accordion.js';
+import { useAccordionContext } from './AccordionContext.js';
 
 // Create context for AccordionItem
 const AccordionItemContext = createContext(undefined);
@@ -9,17 +10,19 @@ const AccordionItemContext = createContext(undefined);
 const useAccordionItemContext = () => {
     const ctx = useContext(AccordionItemContext);
     if (!ctx)
-        throw new Error("Accordion.Trigger and Accordion.Content must be used within Accordion.Item");
+        throw new Error("Accordion.Trigger and Accordion.Body must be used within Accordion.Item");
     return ctx;
 };
-const AccordionItem = React__default.forwardRef(({ children, className, value, ...props }, ref) => {
+const AccordionItem = React__default.forwardRef(({ children, className, value, disabled = false, ...props }, ref) => {
     const { value: selectedValue, onValueChange, type, variant, collapsible, theme } = useAccordionContext();
     // Determine if this item is open
     const isOpen = type === "single"
         ? selectedValue === value
         : Array.isArray(selectedValue) && selectedValue.includes(value);
     // Toggle handler for this specific item
-    const toggle = () => {
+    const toggle = useCallback(() => {
+        if (disabled)
+            return;
         if (type === "single") {
             // For single type, either select this item or clear selection if collapsible
             onValueChange(isOpen && collapsible ? "" : value);
@@ -36,22 +39,23 @@ const AccordionItem = React__default.forwardRef(({ children, className, value, .
                 onValueChange([value]);
             }
         }
-    };
+    }, [disabled, type, isOpen, collapsible, onValueChange, selectedValue, value]);
     // Generate IDs for ARIA linkage
     const triggerId = `accordion-item-${value}-trigger`;
     const contentId = `accordion-item-${value}-content`;
     // Context value for Trigger and Content
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         value,
         isOpen,
+        disabled,
         toggle,
         triggerId,
         contentId,
-    };
+    }), [value, isOpen, disabled, toggle, triggerId, contentId]);
     // Select item style based on variant
     const itemStyleClass = variant === "stacked" ? theme === null || theme === void 0 ? void 0 : theme.itemStyleStacked : theme === null || theme === void 0 ? void 0 : theme.itemStyle;
-    return (jsx(AccordionItemContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(itemStyleClass, className), "data-state": isOpen ? "open" : "closed", "data-variant": variant, "data-value": value, ...props, children: children }) }));
+    return (jsx(AccordionItemContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(itemStyleClass, className), "data-state": isOpen ? "open" : "closed", "data-variant": variant, "data-value": value, "data-disabled": disabled, ...props, children: children }) }));
 });
-AccordionItem.displayName = "AccordionItem";
+AccordionItem.displayName = "Accordion.Item";
 
 export { AccordionItem, useAccordionItemContext };

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

@@ -1,19 +1,61 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useAccordionContext } from './Accordion.js';
+import { useAccordionContext } from './AccordionContext.js';
 import { useAccordionItemContext } from './AccordionItem.js';
 import { motion } from 'motion/react';
 import { PlusIcon } from '@heroicons/react/24/outline';
+import { createTriggerIconVariants } from './Accordion.animations.js';
 
-const AccordionTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
+const AccordionTrigger = React__default.forwardRef(({ children, className, chevron, chevronRotation, iconRotation, chevronPosition = "right", ...props }, ref) => {
+    var _a;
     const { theme } = useAccordionContext();
-    const { isOpen, toggle, triggerId, contentId } = useAccordionItemContext();
-    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", onClick: toggle, ...props, children: [children, jsx(motion.div, { animate: { rotate: isOpen ? 45 : 0 }, transition: {
-                    duration: 0.2,
-                    ease: [0.4, 0.0, 0.2, 1]
-                }, className: "flex items-center justify-center", children: jsx(PlusIcon, { className: "size-4", strokeWidth: 2 }) })] }));
+    const { isOpen, disabled, toggle, triggerId, contentId } = useAccordionItemContext();
+    const resolvedChevronRotation = (_a = chevronRotation !== null && chevronRotation !== void 0 ? chevronRotation : iconRotation) !== null && _a !== void 0 ? _a : 45;
+    // Resolve the indicator icon
+    const defaultChevronIcon = jsx(PlusIcon, { className: "size-4", strokeWidth: 2 });
+    const resolvedChevron = chevron === null
+        ? null
+        : chevron !== undefined
+            ? chevron
+            : chevronPosition === "left"
+                ? null // rendered in the left slot instead
+                : defaultChevronIcon;
+    // When chevronPosition="left", render the default animated chevron before children
+    const useDefaultOnLeft = chevron !== null && chevronPosition === "left" && chevron === undefined;
+    const animatedChevron = (rotation, extraClass) => (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(rotation), className: cn("flex items-center justify-center shrink-0", extraClass), children: defaultChevronIcon }));
+    const handleKeyDown = (event) => {
+        const currentButton = event.currentTarget;
+        // Find the accordion container (closest ancestor with role="region" or the first
+        // common ancestor that holds all triggers). Walk up until we find a container
+        // that owns multiple [data-accordion-trigger] buttons.
+        let container = currentButton.parentElement;
+        while (container) {
+            const triggers = container.querySelectorAll('[data-accordion-trigger]');
+            if (triggers.length > 1)
+                break;
+            container = container.parentElement;
+        }
+        if (!container)
+            return;
+        // Roving nav skips disabled triggers — matches Tabs'
+        // `[role="tab"]:not([disabled])` selector.
+        const triggers = Array.from(container.querySelectorAll('[data-accordion-trigger]:not([disabled])'));
+        const currentIndex = triggers.indexOf(currentButton);
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const next = triggers[(currentIndex + 1) % triggers.length];
+            next === null || next === void 0 ? void 0 : next.focus();
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const prev = triggers[(currentIndex - 1 + triggers.length) % triggers.length];
+            prev === null || prev === void 0 ? void 0 : prev.focus();
+        }
+    };
+    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, disabled: disabled, "aria-disabled": disabled || undefined, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, "data-accordion-trigger": true, onClick: toggle, onKeyDown: handleKeyDown, ...props, children: [useDefaultOnLeft && animatedChevron(resolvedChevronRotation), children, resolvedChevron && (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(resolvedChevronRotation), className: "flex items-center justify-center shrink-0 ml-auto", children: resolvedChevron }))] }));
 });
-AccordionTrigger.displayName = "AccordionTrigger";
+AccordionTrigger.displayName = "Accordion.Trigger";
 
 export { AccordionTrigger };

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

@@ -1,4 +1,4 @@
 import { Accordion } from "./Accordion";
-import { AccordionProps, AccordionTriggerProps, AccordionContentProps, AccordionItemProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides } from "./Accordion.types";
+import { AccordionProps, AccordionTriggerProps, AccordionBodyProps, AccordionItemProps, AccordionItemData, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides } from "./Accordion.types";
 export { Accordion };
-export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides, };
+export type { AccordionProps, AccordionItemProps, AccordionItemData, AccordionTriggerProps, AccordionBodyProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides, };

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

@@ -0,0 +1,11 @@
+import { Variants } from "motion/react";
+/**
+ * Alert entrance/exit animation variants
+ * Entrance: slide down from -8px + fade in
+ * Exit: fade out + collapse height
+ */
+export declare const alertVariants: Variants;
+/**
+ * Reduced motion variants — instant opacity toggle, no slide or collapse
+ */
+export declare const reducedMotionAlertVariants: Variants;

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

@@ -0,0 +1,45 @@
+"use client";
+/**
+ * Alert entrance/exit animation variants
+ * Entrance: slide down from -8px + fade in
+ * Exit: fade out + collapse height
+ */
+const alertVariants = {
+    hidden: {
+        opacity: 0,
+        y: -8,
+        height: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginTop: 0,
+        marginBottom: 0,
+        overflow: "hidden",
+        transition: {
+            duration: 0.15,
+            ease: [0.4, 0, 1, 1],
+        },
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+        height: "auto",
+        paddingTop: undefined,
+        paddingBottom: undefined,
+        marginTop: undefined,
+        marginBottom: undefined,
+        overflow: "visible",
+        transition: {
+            duration: 0.2,
+            ease: [0.4, 0, 0.2, 1],
+        },
+    },
+};
+/**
+ * Reduced motion variants — instant opacity toggle, no slide or collapse
+ */
+const reducedMotionAlertVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+};
+
+export { alertVariants, reducedMotionAlertVariants };