@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.15

package/dist/components/ai/CodeBlock/CodeBlock.theme.js

@@ -7,7 +7,7 @@ const codeBlockTheme = {
     languageLabel: "text-sm uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
     codeWrapper: "overflow-x-auto",
     lineNumber: "text-[var(--color-text-muted)] select-none text-right tabular-nums min-w-[2.5rem] pr-4 opacity-50",
-    highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-neutral-400/5 dark:border-l-neutral-200",
+    highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-[var(--color-neutral-400)]/5 dark:border-l-[var(--color-neutral-200)]",
     diffAddition: "-mx-4 px-4 bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] dark:bg-[var(--color-success-600)]/20 dark:border-l-[var(--color-success-700)]",
     diffDeletion: "-mx-4 px-4 bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] dark:bg-[var(--color-danger-600)]/20 dark:border-l-[var(--color-danger-700)]",
     copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",

package/dist/components/ai/PromptInput/PromptInput.js

@@ -512,13 +512,15 @@ className, textareaClassName, footerClassName, theme = {},
         return (jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle, extraClassName), size: buttonSize, variant: buttonVariant, color: buttonColor, onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, showReflection: buttonVariant === "filled" ? false : undefined, children: jsx(AnimatePresence, { mode: "wait", initial: false, children: jsx(motion.span, { variants: iconSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex items-center justify-center", children: submitButtonIcon }, "submit") }) }));
     };
     // ========== Render ==========
-    return (jsxs("div", { className: cn("min-w-xl mx-auto", className), ...props, children: [jsx("input", { ref: fileInputRef, type: "file", accept: acceptedFileTypes.join(","), multiple: true, onChange: (e) => {
+    return (jsxs("div", { className: cn("w-full mx-auto", className), ...props, children: [jsx("input", { ref: fileInputRef, type: "file", accept: acceptedFileTypes.join(","), multiple: true, onChange: (e) => {
                     if (e.target.files)
                         processFiles(e.target.files);
                     e.target.value = "";
                 }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn("relative", mergedTheme.baseStyle, mergedTheme.stateStyle, variant === "simple" ? "p-3 rounded-full pl-5" : ""), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx(AnimatePresence, { children: isDragOver && enableDropzone && (jsxs(motion.div, { variants: dropzoneContainerVariants, initial: "initial", animate: "animate", exit: "exit", className: mergedTheme.dropzoneStyle, children: [jsx(motion.div, { variants: dropzoneChildVariants, children: jsx(CloudArrowUpIcon, { className: "size-8 text-[var(--color-primary)] mx-auto" }) }), jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneTitleStyle, children: dropzoneTitle ? (
                                     // Parse **browse** as clickable button
-                                    jsx(Fragment, { children: resolvedDropzoneTitle.split(/\*\*(.*?)\*\*/).map((part, i) => i % 2 === 1 ? (jsx("button", { type: "button", onClick: handleDropzoneBrowse, className: "font-bold underline underline-offset-2 cursor-pointer hover:opacity-80", children: part }, i)) : (jsx("span", { children: part }, i))) })) : (resolvedDropzoneTitle) }), dropzoneSubtitle && (jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneSubtitleStyle, children: dropzoneSubtitle })), dropzoneTitle && (jsx(motion.div, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneActionsStyle, children: [
+                                    jsx(Fragment, { children: resolvedDropzoneTitle
+                                            .split(/\*\*(.*?)\*\*/)
+                                            .map((part, i) => i % 2 === 1 ? (jsx("button", { type: "button", onClick: handleDropzoneBrowse, className: "font-bold underline underline-offset-2 cursor-pointer hover:opacity-80", children: part }, i)) : (jsx("span", { children: part }, i))) })) : (resolvedDropzoneTitle) }), dropzoneSubtitle && (jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneSubtitleStyle, children: dropzoneSubtitle })), dropzoneTitle && (jsx(motion.div, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneActionsStyle, children: [
                                         CloudArrowUpIcon,
                                         MicrophoneIcon,
                                         PaperClipIcon,

package/dist/components/ai/PromptInput/VoiceRecorder.js

@@ -170,7 +170,7 @@ const VoiceRecorder = ({ onComplete, onCancel, maxDuration, className, }) => {
             setRecordingState("recording");
         }
     }, [recordingState, clearTimer, startTimer]);
-    return (jsxs("div", { className: cn("flex items-center justify-between w-full", className), children: [jsx(Button, { variant: "ghost", color: "neutral", size: "sm", className: "rounded-full", onClick: handleCancel, "aria-label": "Cancel recording", children: "Cancel" }), jsxs("div", { className: "flex items-center gap-2.5", children: [jsx(motion.div, { className: "size-2.5 rounded-full bg-[var(--color-danger)]", animate: recordingState === "recording"
+    return (jsxs("div", { className: cn("flex items-center justify-between w-full", className), children: [jsx(Button, { variant: "soft", color: "neutral", size: "sm", className: "rounded-full", onClick: handleCancel, "aria-label": "Cancel recording", children: "Cancel" }), jsxs("div", { className: "flex items-center gap-2.5", children: [jsx(motion.div, { className: "size-2.5 rounded-full bg-[var(--color-danger)]", animate: recordingState === "recording"
                             ? { opacity: [1, 0.3, 1] }
                             : { opacity: 0.5 }, transition: recordingState === "recording"
                             ? { duration: 1.2, repeat: Infinity, ease: "easeInOut" }

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js

@@ -1,10 +1,10 @@
 const promptSuggestionTheme = {
-    baseStyle: "inline-flex items-center gap-2 py-2 px-3.5 rounded-full " +
-        "bg-white dark:bg-[var(--color-background)] " +
+    baseStyle: "inline-flex items-center gap-2 py-1 px-3 rounded-[var(--card-radius)] " +
+        "bg-[var(--color-surface)] " +
         "border border-[var(--color-border)] " +
-        "text-base font-medium text-[var(--color-text-primary)] " +
+        "text-base text-[var(--color-text-primary)] " +
         "cursor-pointer transition-all duration-300 " +
-        "hover:bg-[var(--color-background-secondary)] dark:hover:bg-[var(--color-background-secondary)] " +
+        "hover:bg-[var(--color-background-secondary)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     iconStyle: "size-4 flex-shrink-0",
 };

package/dist/components/ai/StreamingResponse/StreamingResponse.js

@@ -4,6 +4,12 @@ import { useStreamingSSE } from '../../../hooks/useStreamingSSE.js';
 import { Message } from '../../core/Message/Message.js';
 import { TypeWriter } from '../../core/Message/TypeWriter.js';
 import '../../core/Message/MessageBody.js';
+import 'clsx';
+import 'tailwind-merge';
+import '../../core/Button/Button.js';
+import '@heroicons/react/16/solid';
+import '@heroicons/react/24/outline';
+import '@heroicons/react/24/solid';
 import { ErrorDisplay } from './ErrorDisplay.js';
 import { MarkdownRenderer } from './MarkdownRenderer.js';
 import { AnimatedText } from './AnimatedText.js';

package/dist/components/ai/ThinkingIndicator/ThinkingIndicator.js

@@ -35,20 +35,9 @@ const ThinkingIndicator = React__default.forwardRef(({ visible = true, label = "
     const dotsContainerStyle = customTheme.dotsContainerStyle ||
         thinkingIndicatorTheme.dotsContainerStyle;
     const dotStyle = customTheme.dotStyle || thinkingIndicatorTheme.dotStyle;
-    // Simplified animation for reduced motion preference
-    const reducedMotionProps = shouldReduceMotion
-        ? {
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-        }
-        : {
-            variants: containerVariants,
-            initial: "hidden",
-            animate: "visible",
-            exit: "exit",
-        };
-    return (jsx(AnimatePresence, { mode: "wait", children: visible && (jsxs(motion.div, { ref: ref, className: cn(baseStyle, sizeConfig.container, className), ...reducedMotionProps, ...props, children: [icon ? (jsx("span", { className: dotsContainerStyle, children: icon })) : (jsx("span", { className: dotsContainerStyle, children: [0, 1, 2].map((index) => (jsx(motion.span, { className: cn(dotStyle, sizeConfig.dot), variants: shouldReduceMotion ? undefined : dotVariants, initial: "initial", animate: "animate", custom: index, style: shouldReduceMotion ? { opacity: 0.7 } : undefined }, index))) })), showLabel && (jsx("span", { className: cn(labelStyle, sizeConfig.label), children: label }))] })) }));
+    // Extract conflicting DOM props for motion.div compatibility
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
+    return (jsx(AnimatePresence, { mode: "wait", children: visible && (jsxs(motion.div, { ref: ref, className: cn(baseStyle, sizeConfig.container, className), variants: shouldReduceMotion ? undefined : containerVariants, initial: shouldReduceMotion ? { opacity: 0 } : "hidden", animate: shouldReduceMotion ? { opacity: 1 } : "visible", exit: shouldReduceMotion ? { opacity: 0 } : "exit", ...motionSafeProps, children: [icon ? (jsx("span", { className: dotsContainerStyle, children: icon })) : (jsx("span", { className: dotsContainerStyle, children: [0, 1, 2].map((index) => (jsx(motion.span, { className: cn(dotStyle, sizeConfig.dot), variants: shouldReduceMotion ? undefined : dotVariants, initial: "initial", animate: "animate", custom: index, style: shouldReduceMotion ? { opacity: 0.7 } : undefined }, index))) })), showLabel && (jsx("span", { className: cn(labelStyle, sizeConfig.label), children: label }))] })) }));
 });
 ThinkingIndicator.displayName = "ThinkingIndicator";
 

package/dist/components/ai/index.d.ts

@@ -1,7 +1,5 @@
 export { Message, messageTheme } from "../core/Message";
 export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, } from "../core/Message";
-export { MessageHistory, messageHistoryTheme } from "./MessageHistory";
-export type { MessageHistoryProps, ChatMessageData, MessageHistoryTheme, MessageHistoryThemeOverrides, } from "./MessageHistory";
 export { PromptInput, promptInputTheme } from "./PromptInput";
 export type { PromptInputProps, PromptInputState, ModelOption, PromptInputTheme, PromptInputThemeOverrides, } from "./PromptInput";
 export { ThinkingIndicator, thinkingIndicatorTheme } from "./ThinkingIndicator";
@@ -14,6 +12,3 @@ export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, Stream
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, MarkdownRendererProps, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";
 export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock";
-export { ApprovalCard } from "./ApprovalCard";
-export type { ApprovalCardProps, ApprovalRiskLevel, } from "./ApprovalCard";
-export { approvalCardTheme } from "./ApprovalCard/ApprovalCard.theme";

package/dist/components/ai/index.js

@@ -2,8 +2,14 @@ export { Message } from '../core/Message/Message.js';
 export { messageTheme } from '../core/Message/Message.theme.js';
 import '../core/Message/TypeWriter.js';
 import '../core/Message/MessageBody.js';
-export { MessageHistory } from './MessageHistory/MessageHistory.js';
-export { messageHistoryTheme } from './MessageHistory/MessageHistory.theme.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'tailwind-merge';
+import 'react';
+import '../core/Button/Button.js';
+import '@heroicons/react/16/solid';
+import '@heroicons/react/24/outline';
+import '@heroicons/react/24/solid';
 export { PromptInput } from './PromptInput/PromptInput.js';
 export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
 export { ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.js';
@@ -23,5 +29,3 @@ export { streamingResponseTheme } from './StreamingResponse/StreamingResponse.th
 export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition } from './StreamingResponse/StreamingResponse.animations.js';
 export { CodeBlock } from './CodeBlock/CodeBlock.js';
 export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
-export { ApprovalCard } from './ApprovalCard/ApprovalCard.js';
-export { approvalCardTheme } from './ApprovalCard/ApprovalCard.theme.js';

package/dist/components/charts/DonutChart/DonutChart.js

@@ -10,7 +10,7 @@ import { resolveCssVariable, describeRingSegmentPath, interpolateHexColor, clamp
  * DonutChart component for displaying a percentage value with a circular progress indicator
  * Supports customization of size, thickness, animations, and theming
  */
-const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200, thickness = 2, segmentCount = 32, segmentGap = 0.35, showAnimation = true, className, children, theme: themeOverrides, colors, ...props }) => {
+const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200, thickness = 2, segmentCount = 32, segmentGap = 0.35, showAnimation = true, className, children, theme: themeOverrides, colors, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }) => {
     var _a, _b;
     const [isHovered, setIsHovered] = useState(false);
     const [hasAnimated, setHasAnimated] = useState(false);

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.js

@@ -93,7 +93,7 @@ const AnimatedStrokeSegment = React__default.memo(AnimatedStrokeSegmentInner);
  * MultiSegmentDonutChart component for displaying multiple data values in a circular chart
  * Each segment represents a different data point with its own value and optional color
  */
-const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap = 0.05, showAnimation = true, showLegend = false, legendPosition = "right", centerContent, className, theme: themeOverrides, onSegmentHover, onSegmentClick, roundedCaps = true, ...restProps }) => {
+const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap = 0.05, showAnimation = true, showLegend = false, legendPosition = "right", centerContent, className, theme: themeOverrides, onSegmentHover, onSegmentClick, roundedCaps = true, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...restProps }) => {
     const [hoveredSegment, setHoveredSegment] = useState(null);
     const [hasAnimated, setHasAnimated] = useState(false);
     const shouldReduceMotion = useReducedMotion();

package/dist/components/charts/FunnelChart/FunnelChart.js

@@ -430,7 +430,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "ghost", size: "sm", pill: true, children: ["\u2193 ", stage.conversionRate.toFixed(1), "%"] }) }, `conversion-${stage.name}`));
+                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "soft", size: "sm", pill: true, children: ["\u2193 ", stage.conversionRate.toFixed(1), "%"] }) }, `conversion-${stage.name}`));
                 }), orientation === "vertical" &&
                 showConversionRate &&
                 stages.map((stage, index) => {
@@ -448,7 +448,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "ghost", size: "sm", pill: true, children: [stage.conversionRate.toFixed(0), "%"] }) }, `conversion-${stage.name}`));
+                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "soft", size: "sm", pill: true, children: [stage.conversionRate.toFixed(0), "%"] }) }, `conversion-${stage.name}`));
                 }), showSummary && summaryPosition !== "none" && stages.length > 1 && (jsxs(motion.div, { className: cn("absolute bg-[var(--color-background)] rounded-lg shadow-sm border border-[var(--color-border)] px-3 py-2 pointer-events-none", getSummaryPositionClasses(summaryPosition)), ...(animate
                     ? {
                         variants: summaryVariants,

package/dist/components/charts/shared/ChartLegend/ChartLegend.types.d.ts

@@ -1,4 +1,16 @@
 import { ReactNode } from 'react';
+/**
+ * Individual payload item for chart legend entries
+ */
+export interface ChartLegendPayloadItem {
+    value?: string;
+    type?: string;
+    id?: string;
+    color?: string;
+    dataKey?: string;
+    payload?: Record<string, unknown>;
+    [key: string]: unknown;
+}
 export interface ChartLegendProps {
     content?: ReactNode;
     wrapperStyle?: React.CSSProperties;
@@ -9,7 +21,7 @@ export interface ChartLegendProps {
     className?: string;
 }
 export interface ChartLegendContentProps {
-    payload?: any[];
+    payload?: ChartLegendPayloadItem[];
     nameKey?: string;
     className?: string;
 }

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.js

@@ -11,7 +11,7 @@ const ChartLegendContent = ({ payload = [], nameKey = 'name', className, ...prop
     return (jsx("div", { className: `flex flex-wrap gap-4 ${className || ''}`, ...props, children: payload.map((entry, index) => {
             const name = entry[nameKey] || entry.dataKey || `Series ${index + 1}`;
             const color = entry.color || '#8884d8';
-            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-base text-gray-600", children: name })] }, index));
+            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-base text-gray-600", children: String(name) })] }, index));
         }) }));
 };
 

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.types.d.ts

@@ -1,4 +1,15 @@
 import { ReactNode } from 'react';
+/**
+ * Individual payload item from chart data
+ */
+export interface ChartTooltipPayloadItem {
+    name?: string;
+    value?: number | string;
+    color?: string;
+    dataKey?: string;
+    payload?: Record<string, unknown>;
+    [key: string]: unknown;
+}
 /**
  * ChartTooltip theme configuration
  */
@@ -30,7 +41,7 @@ export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElem
     contentStyle?: React.CSSProperties;
     itemStyle?: React.CSSProperties;
     active?: boolean;
-    payload?: any[];
+    payload?: ChartTooltipPayloadItem[];
     label?: string | number;
     className?: string;
     position?: {
@@ -42,7 +53,7 @@ export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElem
 }
 export interface ChartTooltipContentProps {
     active?: boolean;
-    payload?: any[];
+    payload?: ChartTooltipPayloadItem[];
     label?: string | number;
     labelKey?: string;
     nameKey?: string;

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

@@ -52,6 +52,6 @@ const AccordionItem = React__default.forwardRef(({ children, className, value, .
     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 }) }));
 });
-AccordionItem.displayName = "AccordionItem";
+AccordionItem.displayName = "Accordion.Item";
 
 export { AccordionItem, useAccordionItemContext };

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

@@ -26,6 +26,6 @@ const AccordionTrigger = React__default.forwardRef(({ children, className, chevr
     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 }));
     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: [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/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,44 @@
+/**
+ * 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 };

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

@@ -1,7 +1,9 @@
 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 { reducedMotionAlertVariants, alertVariants } from './Alert.animations.js';
 import { XMarkIcon, XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, BellIcon } from '@heroicons/react/24/solid';
 import { Button } from '../Button/Button.js';
 
@@ -15,10 +17,16 @@ const defaultIcons = {
 };
 const Alert = React__default.forwardRef(({ variant = "default", 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) {
@@ -33,11 +41,16 @@ 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 && (typeof title === 'string'
+    const alertContent = (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 && (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: "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 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/Avatar/Avatar.js

@@ -6,7 +6,7 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { UserIcon } from '@heroicons/react/24/solid';
 
-const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "none", fallback, className, role, lazyLoad = true, retryCount = 0, retryDelay = 1000, contextualLabel, groupPosition, showTooltip = false, initialsCount = 2, ...props }, ref) => {
+const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "none", fallback, className, role, lazyLoad = true, retryCount = 0, retryDelay = 1000, contextualLabel, groupPosition, showTooltip = false, initialsCount = 2, title, subtitle, ...props }, ref) => {
     const [imageError, setImageError] = useState(false);
     const [retries, setRetries] = useState(0);
     const retryTimerRef = useRef(null);
@@ -86,13 +86,18 @@ const Avatar = React__default.forwardRef(({ src, name, size = "md", status = "no
         : (resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar");
     // Determine appropriate ARIA role
     const ariaRole = role || (src ? undefined : "img");
-    // Avatar content to potentially wrap in tooltip
-    const avatarContent = (jsxs("div", { ref: ref, className: cn("relative inline-flex avatar-wrapper", groupPosition), role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [jsx("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size, children: src && !imageError ? (jsx("img", { src: src, alt: resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar", className: "size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (jsx("div", { className: "avatar-fallback", children: getFallbackContent() })) }), status !== "none" && (jsx("span", { className: cn("absolute rounded-full ring-2 ring-[var(--color-background)]", getStatusSize(), avatarTheme.statuses[status]), "aria-label": `Status: ${status}`, role: "status", "data-status": status }))] }));
-    // Conditionally wrap in tooltip
-    if (showTooltip && resolvedName) {
-        return (jsx(Tooltip, { content: resolvedName, placement: "top", children: avatarContent }));
+    const resolvedTitle = title !== null && title !== void 0 ? title : (subtitle ? resolvedName : undefined);
+    const hasTextSection = !!(resolvedTitle || subtitle);
+    // The avatar circle with status indicator
+    const avatarCircle = (jsxs("div", { className: cn("relative inline-flex avatar-wrapper shrink-0", groupPosition), children: [jsx("div", { className: cn(avatarTheme.baseStyle, avatarTheme.sizes[size], className), "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-size": size, children: src && !imageError ? (jsx("img", { src: src, alt: resolvedName !== null && resolvedName !== void 0 ? resolvedName : "Avatar", className: "size-full object-cover object-top", onError: handleImageError, loading: lazyLoad ? "lazy" : undefined, "aria-hidden": ariaRole === "presentation" ? "true" : undefined, "data-loaded": "true" })) : (jsx("div", { className: "avatar-fallback flex items-center justify-center size-full", children: getFallbackContent() })) }), status !== "none" && (jsx("span", { className: cn("absolute rounded-full ring-2 ring-[var(--color-background)]", getStatusSize(), avatarTheme.statuses[status]), "aria-label": `Status: ${status}`, role: "status", "data-status": status }))] }));
+    // Wrap circle in tooltip if needed
+    const avatarWithTooltip = showTooltip && resolvedName ? (jsx(Tooltip, { content: resolvedName, placement: "top", children: avatarCircle })) : (avatarCircle);
+    // If no text section, render just the avatar
+    if (!hasTextSection) {
+        return (jsx("div", { ref: ref, role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: avatarWithTooltip }));
     }
-    return avatarContent;
+    // Render avatar with text section
+    return (jsxs("div", { ref: ref, className: cn("inline-flex items-center", avatarTheme.gapSizes[size]), role: ariaRole === "presentation" ? "presentation" : undefined, "aria-label": ariaRole === "presentation" ? undefined : accessibilityLabel, "data-size": size, "data-status": status, "data-error": imageError ? "true" : "false", ...props, children: [avatarWithTooltip, jsxs("div", { className: "min-w-0", children: [resolvedTitle && (jsx("div", { className: cn(avatarTheme.titleStyle, avatarTheme.textSizes[size]), children: resolvedTitle })), subtitle && (jsx("div", { className: cn(avatarTheme.subtitleStyle, avatarTheme.textSizes[size]), children: subtitle }))] })] }));
 });
 // Set display name for dev tools and Storybook
 Avatar.displayName = "Avatar";

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

@@ -1,14 +1,12 @@
 import { AvatarSize, AvatarStatus } from "./Avatar.types";
-/**
- * Internal theme structure for the Avatar component
- */
 interface AvatarTheme {
     baseStyle: string;
     sizes: Record<AvatarSize, string>;
     statuses: Record<AvatarStatus, string>;
+    titleStyle: string;
+    subtitleStyle: string;
+    textSizes: Record<AvatarSize, string>;
+    gapSizes: Record<AvatarSize, string>;
 }
-/**
- * Default theme for the Avatar component
- */
 export declare const avatarTheme: AvatarTheme;
 export {};

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

@@ -1,25 +1,35 @@
-/**
- * Default theme for the Avatar component
- */
 const avatarTheme = {
-    // Base styles for the avatar element
-    baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-neutral-200 text-[var(--color-text-primary)] font-bold tracking-tighter rounded-[var(--avatar-radius)] border border-[var(--color-border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
-    // Size variants using CSS variables
+    baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-[var(--color-surface)] text-[var(--color-text-primary)] font-bold tracking-tighter rounded-[var(--avatar-radius)] border border-[var(--color-border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
     sizes: {
-        xs: "size-[var(--avatar-size-xs)] text-xs",
+        xs: "size-[var(--avatar-size-xs)] text-sm",
         sm: "size-[var(--avatar-size-sm)] text-sm",
-        md: "size-[var(--avatar-size-md)] text-md",
-        lg: "size-[var(--avatar-size-lg)] text-lg",
-        xl: "size-[var(--avatar-size-xl)] text-xl",
+        md: "size-[var(--avatar-size-md)] text-base",
+        lg: "size-[var(--avatar-size-lg)] text-base",
+        xl: "size-[var(--avatar-size-xl)] text-base",
     },
-    // Status indicator styles
     statuses: {
         online: "bg-[var(--color-success)]",
-        offline: "bg-neutral-400",
+        offline: "bg-[var(--color-text-muted)]",
         busy: "bg-[var(--color-danger)]",
         away: "bg-[var(--color-warning)]",
         none: "",
     },
+    titleStyle: "font-medium leading-tight text-[var(--color-text-primary)] truncate",
+    subtitleStyle: "leading-tight text-[var(--color-text-muted)] truncate",
+    textSizes: {
+        xs: "text-sm",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-base",
+        xl: "text-base",
+    },
+    gapSizes: {
+        xs: "gap-1.5",
+        sm: "gap-2",
+        md: "gap-2.5",
+        lg: "gap-3",
+        xl: "gap-3",
+    },
 };
 
 export { avatarTheme };

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

@@ -67,4 +67,13 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default 2
      */
     initialsCount?: number;
+    /**
+     * Title text displayed next to the avatar.
+     * Defaults to `name` if not provided.
+     */
+    title?: string;
+    /**
+     * Subtitle text displayed below the title (e.g., email, role).
+     */
+    subtitle?: string;
 }

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

@@ -38,8 +38,8 @@ const getAvatarGroupVariants = (shouldReduceMotion = false, enableAnimations = t
         },
         notHovered: () => {
             return {
-                scale: 0.95,
-                y: 2,
+                scale: 1,
+                y: 0,
                 filter: "saturate(0)",
                 transition: {
                     type: "spring",

package/dist/components/core/AvatarGroup/AvatarGroup.js

@@ -48,8 +48,7 @@ const AvatarGroup = React__default.forwardRef(({ avatars = [], max = 5, size = "
                     index > 0 ? spacingClass : "z-10"), "data-position": position, "data-index": index, ...motionProps, children: jsx(Avatar, { size: size, ...avatarProps, contextualLabel: contextLabel, 
                         // Ensure that groupPosition is not passed to avoid conflicts
                         groupPosition: undefined }) }, index));
-            }), overflowCount > 0 && (jsx("div", { className: cn(spacingClass, enableAnimations &&
-                    "transition-transform duration-200 hover:scale-110"), "data-overflow-count": overflowCount, children: overflowIndicator ? (overflowIndicator(overflowCount)) : (jsx(Avatar, { size: size, name: `+${overflowCount} more`, fallback: jsxs("span", { children: ["+", overflowCount] }), className: avatarGroupTheme.overflowAvatarStyle, role: "img", "aria-label": `+ ${overflowCount} more users` })) }))] }));
+            }), overflowCount > 0 && (jsx("div", { className: cn(spacingClass, "self-center"), "data-overflow-count": overflowCount, children: overflowIndicator ? (overflowIndicator(overflowCount)) : (jsx(Avatar, { size: size, name: `+${overflowCount} more`, fallback: jsxs("span", { children: ["+", overflowCount] }), className: avatarGroupTheme.overflowAvatarStyle, role: "img", "aria-label": `+ ${overflowCount} more users` })) }))] }));
 });
 // Set display name for dev tools and Storybook
 AvatarGroup.displayName = "AvatarGroup";

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

@@ -11,7 +11,7 @@ const avatarGroupTheme = {
         loose: "-ml-2 z-10",
     },
     // Overflow avatar styles
-    overflowAvatarStyle: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] font-semibold text-base flex items-center justify-center hover:bg-neutral-200 transition-colors duration-200",
+    overflowAvatarStyle: "bg-[var(--color-surface)] text-[var(--color-text-secondary)] font-semibold text-sm flex items-center justify-center size-7",
 };
 
 export { avatarGroupTheme };

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

@@ -53,7 +53,7 @@ const dotVariants = {
 // Dismiss button variants - optimized for performance
 const dismissButtonVariants = {
     initial: {
-        opacity: 0.5,
+        opacity: 0.75,
     },
     hover: {
         opacity: 1,