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

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 { Plus } from '@phosphor-icons/react';
+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(Plus, { className: "size-4", weight: "bold" });
+    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,12 @@
+import { Variants } from "motion/react";
+/**
+ * Alert entrance/exit animation variants
+ * Entrance: slide down from -12px + fade in
+ * Exit: fade out + collapse height
+ * Uses library spring presets for a premium feel
+ */
+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,60 @@
+"use client";
+import '../../../theme/ThemeContext.js';
+import '../../../theme/SurfaceContext.js';
+import { springs } from '../../../theme/animations.js';
+
+/**
+ * Alert entrance/exit animation variants
+ * Entrance: slide down from -12px + fade in
+ * Exit: fade out + collapse height
+ * Uses library spring presets for a premium feel
+ */
+const alertVariants = {
+    hidden: {
+        opacity: 0,
+        y: -12,
+        height: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginTop: 0,
+        marginBottom: 0,
+        overflow: "hidden",
+        transition: {
+            height: springs.smooth,
+            paddingTop: springs.smooth,
+            paddingBottom: springs.smooth,
+            marginTop: springs.smooth,
+            marginBottom: springs.smooth,
+            y: springs.premium,
+            opacity: { duration: 0.15 },
+        },
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+        height: "auto",
+        paddingTop: undefined,
+        paddingBottom: undefined,
+        marginTop: undefined,
+        marginBottom: undefined,
+        overflow: "visible",
+        transition: {
+            y: springs.premium,
+            height: springs.smooth,
+            paddingTop: springs.smooth,
+            paddingBottom: springs.smooth,
+            marginTop: springs.smooth,
+            marginBottom: springs.smooth,
+            opacity: { duration: 0.25 },
+        },
+    },
+};
+/**
+ * Reduced motion variants — instant opacity toggle, no slide or collapse
+ */
+const reducedMotionAlertVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+};
+
+export { alertVariants, reducedMotionAlertVariants };

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

@@ -1,23 +1,32 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import React__default, { useState } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { alertTheme } from './Alert.theme.js';
-import { XMarkIcon, XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, BellIcon } from '@heroicons/react/24/solid';
+import { reducedMotionAlertVariants, alertVariants } from './Alert.animations.js';
+import { X, XCircle, Warning, CheckCircle, Info, Bell } from '@phosphor-icons/react';
 import { Button } from '../Button/Button.js';
 
 const defaultIcons = {
-    neutral: BellIcon,
-    primary: InformationCircleIcon,
-    success: CheckCircleIcon,
-    warning: ExclamationTriangleIcon,
-    danger: XCircleIcon,
+    mono: Bell,
+    primary: Info,
+    success: CheckCircle,
+    warning: Warning,
+    danger: XCircle,
 };
-const Alert = React__default.forwardRef(({ variant = "default", color = "primary", title, subtitle, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
+const Alert = React__default.forwardRef(({ color = "primary", title, subtitle, dismissible, icon, showIcon = true, avatar, actions, onDismiss, className, children, darkMode = false, ...props }, ref) => {
     var _a;
+    const shouldReduceMotion = useReducedMotion();
+    const [isDismissing, setIsDismissing] = useState(false);
     const iconColor = (_a = alertTheme.iconColors[color]) !== null && _a !== void 0 ? _a : alertTheme.iconColors.primary;
     const showDismiss = dismissible === true || (dismissible !== false && !!onDismiss);
     const handleDismiss = () => {
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        if (shouldReduceMotion) {
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+            return;
+        }
+        setIsDismissing(true);
     };
     const renderIconOrAvatar = () => {
         if (avatar) {
@@ -32,7 +41,17 @@ const Alert = React__default.forwardRef(({ variant = "default", color = "primary
         const IconComponent = defaultIcons[color];
         return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: jsx(IconComponent, { className: cn("w-6 h-6", iconColor) }) }));
     };
-    const alertNode = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })), subtitle && (jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: subtitle })), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "link", color: "neutral", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) }))] }));
+    const isUrgent = color === 'danger' || color === 'warning';
+    const alertContent = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, className), role: isUrgent ? 'alert' : 'status', "aria-live": isUrgent ? undefined : 'polite', ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (typeof title === 'string'
+                        ? jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })
+                        : title), subtitle && (typeof subtitle === 'string'
+                        ? jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: subtitle })
+                        : subtitle), children && jsx("div", { className: "mt-2", children: children }), actions && (jsx("div", { className: "flex items-center gap-2 mt-6", children: actions }))] }), showDismiss && (jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, onClick: handleDismiss, "aria-label": "Dismiss alert", className: "rounded-full absolute top-2 right-2 flex-shrink-0", children: jsx(X, { className: "size-4", weight: "bold" }) }))] }));
+    const alertNode = (jsx(motion.div, { variants: shouldReduceMotion ? reducedMotionAlertVariants : alertVariants, initial: "hidden", animate: isDismissing ? "hidden" : "visible", onAnimationComplete: (definition) => {
+            if (definition === "hidden" && isDismissing) {
+                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+            }
+        }, children: alertContent }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: alertNode });
     }

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

@@ -1,3 +1,5 @@
+import { semanticTextColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme configuration for Alert component
  * Uses flat color organization matching Badge pattern
@@ -5,19 +7,8 @@
 const alertTheme = {
     // Base styles applied to all alerts
     baseStyle: "relative flex items-start gap-3 rounded-[var(--alert-radius)] p-4 text-sm border border-[var(--color-border)] backdrop-blur-md bg-white dark:bg-[var(--color-background-secondary)]/80",
-    // Visual style variants (structure only, no colors)
-    variants: {
-        default: "",
-        glass: "glass-effect",
-    },
     // Icon color styles per color
-    iconColors: {
-        neutral: "text-[var(--color-text-primary)]",
-        primary: "text-[var(--color-primary)]",
-        success: "text-[var(--color-success)]",
-        warning: "text-[var(--color-warning)]",
-        danger: "text-[var(--color-danger)]",
-    },
+    iconColors: semanticTextColors,
     // State styles
     states: {
         dismissible: "pr-10",

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

@@ -1,20 +1,15 @@
 import { HTMLAttributes, ReactNode } from "react";
+import { SemanticColor } from "../../../utils/colorUtils";
 /**
  * Alert semantic colors (intent)
  */
-export type AlertColor = "neutral" | "primary" | "success" | "warning" | "danger";
-/**
- * Alert visual variant
- */
-export type AlertVariant = "default" | "glass";
+export type AlertColor = SemanticColor;
 /**
  * Theme configuration for Alert component
  */
 export interface AlertTheme {
     /** Base styles applied to all alerts */
     baseStyle: string;
-    /** Visual style variants (structure only, no colors) */
-    variants: Record<AlertVariant, string>;
     /** Icon color styles per color */
     iconColors: Record<AlertColor, string>;
     /** State styles */
@@ -22,15 +17,13 @@ export interface AlertTheme {
         dismissible: string;
     };
 }
-export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
-    /** Visual variant */
-    variant?: AlertVariant;
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /** Semantic color */
     color?: AlertColor;
     /** The main title/message of the alert */
-    title?: string;
+    title?: ReactNode;
     /** Additional subtitle text */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /** Whether the alert can be dismissed */
     dismissible?: boolean;
     /**
@@ -44,7 +37,7 @@ export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
     showIcon?: boolean;
     /**
      * Avatar to display (takes precedence over icons)
-     * Example: avatar={<Avatar src="..." alt="User name" size="md" />}
+     * Example: avatar={<Avatar src="..." name="User name" size="md" />}
      */
     avatar?: ReactNode;
     /**

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

@@ -1,3 +1,3 @@
 export { Alert } from './Alert';
-export type { AlertProps, AlertVariant, AlertColor, AlertTheme } from './Alert.types';
+export type { AlertProps, AlertColor, AlertTheme } from './Alert.types';
 export { alertTheme } from './Alert.theme';

package/dist/components/core/AlertDialog/AlertDialog.js

@@ -1,8 +1,22 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, isValidElement, cloneElement } from 'react';
 import { Modal } from '../Modal/Modal.js';
 import { cn } from '../../../utils/cn.js';
+import { useModalContext } from '../Modal/ModalContext.js';
 
+/**
+ * Renders AlertDialog's subtitle and stamps Modal's computed `subtitleId`
+ * onto the actual element so `aria-describedby` (wired up by Modal.tsx)
+ * resolves to a real node. `Modal.Subtitle` isn't used here because it
+ * always renders a `<p>`, and AlertDialog's subtitle can carry block-level
+ * content (e.g. a nested `Select`) which is invalid inside a paragraph.
+ * Must be rendered as a descendant of `<Modal>` so `useModalContext` resolves.
+ */
+function AlertDialogSubtitle({ children }) {
+    const { subtitleId } = useModalContext();
+    return (jsx("div", { id: subtitleId, className: "text-[var(--color-text-secondary)] text-base", children: children }));
+}
 const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const handleOpen = () => setIsOpen(true);
@@ -10,7 +24,7 @@ const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) =>
     const triggerElement = isValidElement(trigger)
         ? cloneElement(trigger, { onClick: handleOpen })
         : null;
-    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: false, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx("div", { className: "text-[var(--color-text-secondary)] text-sm", children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
+    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: !footer, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx(AlertDialogSubtitle, { children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
 };
 AlertDialog.displayName = "AlertDialog";