@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -45,10 +45,10 @@ const getUnderlineTransition = (shouldReduceMotion) => {
     };
 };
 /**
- * Get TabsContent animation variants for directional fade animations
+ * Get TabsBody animation variants for directional fade animations
  * Provides smooth fade-in from bottom and fade-out to top transitions
  */
-const getTabsContentVariants = (shouldReduceMotion) => {
+const getTabsBodyVariants = (shouldReduceMotion) => {
     if (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false) {
         // Reduced motion: no animation variants
         return undefined;
@@ -81,4 +81,4 @@ const getTabsContentVariants = (shouldReduceMotion) => {
     };
 };
 
-export { getTabsContentVariants, getTabsTriggerVariants, getUnderlineTransition };
+export { getTabsBodyVariants, getTabsTriggerVariants, getUnderlineTransition };

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

@@ -3,5 +3,5 @@ import { TabsProps } from "./Tabs.types";
 export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
     List: React.ForwardRefExoticComponent<import("./Tabs.types").TabsListProps & React.RefAttributes<HTMLDivElement>>;
     Trigger: React.ForwardRefExoticComponent<import("./Tabs.types").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<import("./Tabs.types").TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Tabs.types").TabsBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/components/core/Tabs/Tabs.js

@@ -5,11 +5,11 @@ import { tabsTheme } from './Tabs.theme.js';
 import { TabsContext } from './TabsContext.js';
 import { TabsList } from './TabsList.js';
 import { TabsTrigger } from './TabsTrigger.js';
-import { TabsContent } from './TabsContent.js';
+import { TabsBody } from './TabsBody.js';
 
 /**
  * Tabs component for organizing content into separate views
- * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Content
+ * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Body
  * Supports optional Framer Motion animations and comprehensive accessibility
  */
 const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
@@ -84,7 +84,7 @@ TabsComponent.displayName = "Tabs";
 const Tabs = Object.assign(TabsComponent, {
     List: TabsList,
     Trigger: TabsTrigger,
-    Content: TabsContent,
+    Body: TabsBody,
 });
 
 export { Tabs };

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

@@ -1,4 +1,4 @@
-import { TabsSize } from './Tabs.types';
+import { TabsSize } from "./Tabs.types";
 /**
  * Clean theme structure for Tabs components
  */
@@ -7,7 +7,7 @@ export interface TabsTheme {
     listStyle: string;
     triggerStyle: string;
     triggerSizes: Record<TabsSize, string>;
-    contentStyle: string;
+    bodyStyle: string;
     underlineStyle: string;
 }
 /**

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

@@ -7,14 +7,14 @@ const tabsTheme = {
     // TabsList styles with proper design tokens
     listStyle: "relative inline-flex items-center flex-row border-b border-[var(--color-border)] gap-2",
     // TabsTrigger base styles - no individual borders, underline will be handled separately
-    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-medium transition-all duration-300 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-muted)] hover:text-[var(--color-text-primary)] data-[state=active]:text-[var(--color-primary)]",
+    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-semibold transition-all duration-300 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-muted)] hover:text-[var(--color-text-primary)] data-[state=active]:text-[var(--color-primary)]",
     // TabsTrigger size variants using CSS variables where applicable
     triggerSizes: {
-        sm: "px-2 py-1.5 text-sm gap-1",
-        md: "px-2 py-2 text-sm gap-1",
+        sm: "px-2 py-1.5 text-base",
+        md: "px-2 py-2 text-base",
     },
-    // TabsContent styles with proper CSS variables
-    contentStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    // TabsBody styles with proper CSS variables
+    bodyStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
     // Sliding underline styles
     underlineStyle: "absolute bottom-0 h-0.5 bg-[var(--color-primary)] transition-none",
 };

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

@@ -23,8 +23,8 @@ export type TabsOrientation = "horizontal";
  *     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
  *     <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  *   </Tabs.List>
- *   <Tabs.Content value="tab1">Content 1</Tabs.Content>
- *   <Tabs.Content value="tab2">Content 2</Tabs.Content>
+ *   <Tabs.Body value="tab1">Content 1</Tabs.Body>
+ *   <Tabs.Body value="tab2">Content 2</Tabs.Body>
  * </Tabs>
  *
  * // Uncontrolled mode
@@ -46,7 +46,7 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
     size?: TabsSize;
     /** Whether all tabs are disabled - individual triggers can also be disabled */
     disabled?: boolean;
-    /** Children components - typically Tabs.List and Tabs.Content components */
+    /** Children components - typically Tabs.List and Tabs.Body components */
     children?: React.ReactNode;
     /**
      * Force dark mode styling for the component. Use when placing the component
@@ -98,20 +98,20 @@ export interface TabsTriggerProps extends React.HTMLAttributes<HTMLButtonElement
     'aria-label'?: string;
 }
 /**
- * TabsContent component props - content panel for each tab
+ * TabsBody component props - content panel for each tab
  * @example
  * ```tsx
- * <Tabs.Content value="profile">
+ * <Tabs.Body value="profile">
  *   <UserProfile data={profileData} />
- * </Tabs.Content>
+ * </Tabs.Body>
  *
  * // Force mount content for performance or state preservation
- * <Tabs.Content value="settings" forceMount>
+ * <Tabs.Body value="settings" forceMount>
  *   <SettingsForm /> // Form state preserved when tab is inactive
- * </Tabs.Content>
+ * </Tabs.Body>
  * ```
  */
-export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabsBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The value that corresponds to a TabsTrigger value - determines when content is shown */
     value: string;
     /** Whether to keep content mounted in DOM when inactive (useful for preserving form state) */

package/dist/components/core/Tabs/TabsBody.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { TabsBodyProps } from "./Tabs.types";
+/**
+ * TabsBody component displays content panels for tabs with directional fade animations
+ */
+export declare const TabsBody: React.ForwardRefExoticComponent<TabsBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Tabs/{TabsContent.js → TabsBody.js}

@@ -4,24 +4,24 @@ import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { useTabsContext } from './TabsContext.js';
-import { getTabsContentVariants } from './Tabs.animations.js';
+import { getTabsBodyVariants } from './Tabs.animations.js';
 
 /**
- * TabsContent component displays content panels for tabs with directional fade animations
+ * TabsBody component displays content panels for tabs with directional fade animations
  */
-const TabsContent = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
+const TabsBody = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
     const { value: selectedValue, orientation } = useTabsContext();
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
-    const shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    const shouldDisableAnimations = !!shouldReduceMotion || !!isInStorybook;
     const isSelected = value === selectedValue;
     const shouldRender = forceMount || isSelected;
     // Compute animation variants without a global cache (HMR-safe)
-    const contentVariants = useMemo(() => getTabsContentVariants(shouldDisableAnimations), [shouldDisableAnimations]);
+    const contentVariants = useMemo(() => getTabsBodyVariants(shouldDisableAnimations), [shouldDisableAnimations]);
     // For forceMount, we handle visibility differently to preserve DOM
     if (forceMount) {
-        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.contentStyle, !isSelected && "hidden", // Hide when not selected but force mounted
+        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, !isSelected && "hidden", // Hide when not selected but force mounted
             className // User overrides take precedence
             ), "data-state": isSelected ? "active" : "inactive", "data-orientation": orientation, style: {
                 // Ensure proper stacking context for animations
@@ -39,12 +39,12 @@ const TabsContent = React__default.forwardRef(({ value, forceMount = false, chil
         exit: "exit",
         variants: contentVariants,
     };
-    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.contentStyle, className // User overrides take precedence
+    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, className // User overrides take precedence
             ), "data-state": "active", "data-orientation": orientation, style: {
                 // Ensure proper stacking context for animations
                 position: "relative",
             }, ...animationProps, ...props, children: children }, `content-${value}`)) }));
 });
-TabsContent.displayName = "TabsContent";
+TabsBody.displayName = "Tabs.Body";
 
-export { TabsContent };
+export { TabsBody };

package/dist/components/core/Tabs/TabsTrigger.js

@@ -14,7 +14,7 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
-    const shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    const shouldDisableAnimations = !!shouldReduceMotion || !!isInStorybook;
     // Memoize derived state flags for performance
     const derivedState = useMemo(() => ({
         isSelected: value === selectedValue,

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

@@ -1,6 +1,6 @@
 export { Tabs } from './Tabs';
 export { TabsList } from './TabsList';
 export { TabsTrigger } from './TabsTrigger';
-export { TabsContent } from './TabsContent';
+export { TabsBody } from './TabsBody';
 export { TabsContext, useTabsContext } from './TabsContext';
-export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps, TabsSize, TabsOrientation, TabsContextValue } from './Tabs.types';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsBodyProps, TabsSize, TabsOrientation, TabsContextValue } from './Tabs.types';

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

@@ -1,17 +1,4 @@
 const tagVariants = {
-    initial: {
-        scale: 0,
-        opacity: 0,
-    },
-    animate: {
-        scale: 1,
-        opacity: 1,
-        transition: {
-            type: "spring",
-            stiffness: 500,
-            damping: 25,
-        },
-    },
     exit: {
         scale: 0,
         opacity: 0,

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

@@ -7,8 +7,8 @@ import { TagProps } from "./Tag.types";
  * @example
  * ```tsx
  * <Tag onRemove={() => handleRemove('tag1')}>JavaScript</Tag>
- * <Tag size="sm" removable={false}>Read Only</Tag>
- * <Tag disabled>Disabled Tag</Tag>
+ * <Tag avatar={{ src: "/avatar.jpg", name: "Alice" }} onRemove={() => {}}>Alice</Tag>
+ * <Tag startContent={<CodeIcon className="size-4" />} onRemove={() => {}}>React</Tag>
  * ```
  */
 export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/core/Tag/Tag.js

@@ -3,6 +3,7 @@ import React__default from 'react';
 import { motion } from 'motion/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
+import { Avatar } from '../Avatar/Avatar.js';
 import { tagTheme } from './Tag.theme.js';
 import { tagVariants, tagLayoutTransition } from './Tag.animations.js';
 
@@ -13,16 +14,21 @@ import { tagVariants, tagLayoutTransition } from './Tag.animations.js';
  * @example
  * ```tsx
  * <Tag onRemove={() => handleRemove('tag1')}>JavaScript</Tag>
- * <Tag size="sm" removable={false}>Read Only</Tag>
- * <Tag disabled>Disabled Tag</Tag>
+ * <Tag avatar={{ src: "/avatar.jpg", name: "Alice" }} onRemove={() => {}}>Alice</Tag>
+ * <Tag startContent={<CodeIcon className="size-4" />} onRemove={() => {}}>React</Tag>
  * ```
  */
-const Tag = React__default.forwardRef(({ children, size = "md", removable = true, onRemove, disabled = false, className, theme: customTheme, ...props }, ref) => {
+const Tag = React__default.forwardRef(({ children, size = "md", removable = true, onRemove, avatar, startContent, disabled = false, className, theme: customTheme, ...props }, ref) => {
     var _a, _b, _c;
     // Merge default theme with custom theme overrides
     const theme = {
         baseStyle: (_a = customTheme === null || customTheme === void 0 ? void 0 : customTheme.baseStyle) !== null && _a !== void 0 ? _a : tagTheme.baseStyle,
         sizes: { ...tagTheme.sizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.sizes },
+        avatarSizes: { ...tagTheme.avatarSizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.avatarSizes },
+        startContentSizes: {
+            ...tagTheme.startContentSizes,
+            ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.startContentSizes,
+        },
         disabledStyle: (_b = customTheme === null || customTheme === void 0 ? void 0 : customTheme.disabledStyle) !== null && _b !== void 0 ? _b : tagTheme.disabledStyle,
         removeButtonStyle: (_c = customTheme === null || customTheme === void 0 ? void 0 : customTheme.removeButtonStyle) !== null && _c !== void 0 ? _c : tagTheme.removeButtonStyle,
         removeIconSizes: {
@@ -30,6 +36,7 @@ const Tag = React__default.forwardRef(({ children, size = "md", removable = true
             ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.removeIconSizes,
         },
     };
+    const hasLeadingContent = !!(avatar || startContent);
     const showRemoveButton = removable && onRemove && !disabled;
     const handleRemove = (e) => {
         e.stopPropagation();
@@ -37,7 +44,17 @@ const Tag = React__default.forwardRef(({ children, size = "md", removable = true
             onRemove();
         }
     };
-    return (jsxs(motion.span, { ref: ref, className: cn(theme.baseStyle, theme.sizes[size], showRemoveButton && "pr-0.5", disabled && theme.disabledStyle, className), layout: true, transition: tagLayoutTransition, variants: tagVariants, initial: "initial", animate: "animate", exit: "exit", "data-size": size, "data-disabled": disabled ? "true" : "false", "data-removable": removable ? "true" : "false", ...props, children: [children, showRemoveButton && (jsx("button", { type: "button", onClick: handleRemove, className: theme.removeButtonStyle, "aria-label": `Remove ${typeof children === "string" ? children : "tag"}`, children: jsx(XMarkIcon, { className: theme.removeIconSizes[size] }) }))] }));
+    // Avatar takes precedence over startContent
+    const renderLeadingContent = () => {
+        if (avatar) {
+            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full", theme.avatarSizes[size]), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, size: "xs", className: "!size-full border-0 rounded-full" }) }));
+        }
+        if (startContent) {
+            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0", theme.startContentSizes[size]), children: startContent }));
+        }
+        return null;
+    };
+    return (jsxs(motion.span, { ref: ref, className: cn(theme.baseStyle, theme.sizes[size], hasLeadingContent && "pl-0.5", showRemoveButton && "pr-0.5", disabled && theme.disabledStyle, className), layout: true, transition: tagLayoutTransition, variants: tagVariants, exit: "exit", "data-size": size, "data-disabled": disabled ? "true" : "false", "data-removable": removable ? "true" : "false", "data-has-avatar": avatar ? "true" : "false", ...props, children: [renderLeadingContent(), children, showRemoveButton && (jsx("button", { type: "button", onClick: handleRemove, className: theme.removeButtonStyle, "aria-label": `Remove ${typeof children === "string" ? children : "tag"}`, children: jsx(XMarkIcon, { className: theme.removeIconSizes[size] }) }))] }));
 });
 Tag.displayName = "Tag";
 

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

@@ -1,10 +1,18 @@
 const tagTheme = {
-    baseStyle: "inline-flex items-center gap-0.5 font-medium rounded-full " +
-        "bg-white dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)] " +
+    baseStyle: "inline-flex items-center gap-1 font-medium rounded-full " +
+        "bg-[var(--color-background-surface)] dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)] " +
         "text-[var(--color-text-primary)]",
     sizes: {
-        sm: "text-xs px-2.5 py-0.5",
-        md: "text-sm px-2.5 py-0.5",
+        sm: "text-sm px-2.5 py-0.5",
+        md: "text-base px-2.5 py-0.5",
+    },
+    avatarSizes: {
+        sm: "size-4 ml-0.5",
+        md: "size-5 ml-1",
+    },
+    startContentSizes: {
+        sm: "ml-0.5",
+        md: "ml-1",
     },
     disabledStyle: "opacity-50 cursor-not-allowed",
     removeButtonStyle: "inline-flex items-center justify-center rounded-full p-1 " +

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 /**
  * Tag component props
  */
@@ -11,6 +11,23 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "o
     removable?: boolean;
     /** Callback when the remove button is clicked */
     onRemove?: () => void;
+    /**
+     * Avatar configuration — renders a sized avatar to the left of the label.
+     * The component controls avatar sizing and styling internally.
+     * Takes precedence over startContent.
+     */
+    avatar?: {
+        src?: string;
+        name: string;
+        fallback?: ReactNode;
+        initialsCount?: number;
+    };
+    /**
+     * Generic content to display at the start (before the label).
+     * Use for icons, emojis, or any custom ReactNode.
+     * Ignored when avatar is provided.
+     */
+    startContent?: ReactNode;
     /** Whether the tag is disabled */
     disabled?: boolean;
     /** Additional class name for the tag */
@@ -24,6 +41,10 @@ export interface TagTheme {
     baseStyle: string;
     /** Size-specific styles */
     sizes: Record<TagSize, string>;
+    /** Avatar sizes for each tag size */
+    avatarSizes: Record<TagSize, string>;
+    /** Start content sizes for each tag size */
+    startContentSizes: Record<TagSize, string>;
     /** Disabled state style */
     disabledStyle: string;
     /** Remove button style */
@@ -34,6 +55,8 @@ export interface TagTheme {
 export interface TagThemeOverrides {
     baseStyle?: string;
     sizes?: Partial<Record<TagSize, string>>;
+    avatarSizes?: Partial<Record<TagSize, string>>;
+    startContentSizes?: Partial<Record<TagSize, string>>;
     disabledStyle?: string;
     removeButtonStyle?: string;
     removeIconSizes?: Partial<Record<TagSize, string>>;

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { ToastProps } from './Toast.types';
+import React from "react";
+import { ToastProps } from "./Toast.types";
 export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Toast/Toast.js

@@ -5,14 +5,18 @@ import { cn } from '../../../utils/cn.js';
 import { toastTheme } from './Toast.theme.js';
 import { toastAnimations, getToastStackingAnimation } from './Toast.animations.js';
 import { ArrowPathIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { Button } from '../Button/Button.js';
 
-const Toast = React__default.forwardRef(({ toast, className, theme: customTheme = {}, // Deprecated - kept for backward compatibility
-onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouseLeave, onHeightChange, expandedOffset, darkMode = false, ...props }, ref) => {
+const isToastAction = (action) => typeof action === "object" &&
+    action !== null &&
+    "label" in action &&
+    "onClick" in action;
+const Toast = React__default.forwardRef(({ toast, className, onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouseLeave, onHeightChange, expandedOffset, darkMode = false, ...props }, ref) => {
     var _a;
     const internalRef = useRef(null);
     const setRefs = useCallback((node) => {
         internalRef.current = node;
-        if (typeof ref === 'function') {
+        if (typeof ref === "function") {
             ref(node);
         }
         else if (ref) {
@@ -20,11 +24,9 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
         }
     }, [ref]);
     const shouldReduceMotion = useReducedMotion();
-    const { id, variant = 'default', state = 'default', title, description, icon, action, duration = 5000, dismissible = true, } = toast;
-    const isTextOnly = !description && !action;
-    const defaultIcon = state === 'loading'
-        ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowPathIcon, { className: "w-5 h-5" }) }))
-        : jsx(InformationCircleIcon, { className: "w-5 h-5" });
+    const { id, variant = "default", state = "default", title, subtitle, icon, action, children, duration = 5000, dismissible = true, } = toast;
+    const isTextOnly = !subtitle && !action && !children;
+    const defaultIcon = state === "loading" ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowPathIcon, { className: "w-5 h-5" }) })) : (jsx(InformationCircleIcon, { className: "w-5 h-5" }));
     const resolvedIcon = icon || defaultIcon;
     // Auto-dismiss after duration
     useEffect(() => {
@@ -41,14 +43,16 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
             const height = internalRef.current.offsetHeight;
             onHeightChange(id, height);
         }
-    }, [id, onHeightChange, title, description]);
+    }, [id, onHeightChange, title, subtitle]);
     const handleDismiss = () => {
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
     };
     const handleActionClick = () => {
-        action === null || action === void 0 ? void 0 : action.onClick();
-        if (dismissible) {
-            handleDismiss();
+        if (isToastAction(action)) {
+            action.onClick();
+            if (dismissible) {
+                handleDismiss();
+            }
         }
     };
     const stackingStyle = getToastStackingAnimation(index, totalToasts, isExpanded, expandedOffset);
@@ -58,27 +62,36 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
             opacity: (_a = stackingStyle.opacity) !== null && _a !== void 0 ? _a : 1,
             y: (_b = stackingStyle.y) !== null && _b !== void 0 ? _b : 0,
             scale: (_c = stackingStyle.scale) !== null && _c !== void 0 ? _c : 1,
-            zIndex: (_d = stackingStyle.zIndex) !== null && _d !== void 0 ? _d : 1
+            zIndex: (_d = stackingStyle.zIndex) !== null && _d !== void 0 ? _d : 1,
         });
-    }, [stackingStyle.opacity, stackingStyle.y, stackingStyle.scale, stackingStyle.zIndex]);
+    }, [
+        stackingStyle.opacity,
+        stackingStyle.y,
+        stackingStyle.scale,
+        stackingStyle.zIndex,
+    ]);
     const styleValue = useMemo(() => {
         var _a;
         return ({
             zIndex: (_a = stackingStyle.zIndex) !== null && _a !== void 0 ? _a : 1,
-            position: (index > 0 ? 'absolute' : 'relative'),
+            position: (index > 0
+                ? "absolute"
+                : "relative"),
             top: index > 0 ? 0 : undefined,
             left: index > 0 ? 0 : undefined,
-            width: index > 0 ? '100%' : undefined,
+            width: index > 0 ? "100%" : undefined,
         });
     }, [stackingStyle.zIndex, index]);
     const toastNode = (jsxs(motion.div, { ref: setRefs, layout: true, initial: shouldReduceMotion ? false : toastAnimations.initial, animate: animateValue, exit: shouldReduceMotion
             ? { ...toastAnimations.exit, transition: { duration: 0 } }
-            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && 'items-center', ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: isTextOnly ? toastTheme.iconCenteredStyle : toastTheme.iconStyle, children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsx("div", { className: isTextOnly ? toastTheme.textOnlyStyle : toastTheme.titleStyle, children: title })), description && (jsx("div", { className: toastTheme.descriptionStyle, children: description })), action && (jsx("div", { className: "mt-2", children: jsx("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick, children: action.label }) }))] }), dismissible && (jsx("button", { type: "button", className: isTextOnly ? toastTheme.closeButtonCenteredStyle : toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "w-4 h-4" }) }))] }));
+            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && "items-center", ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", "pointer-events-auto", index > 0 && !isExpanded && "absolute top-0 left-0", className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: cn(toastTheme.iconStyle, !isTextOnly && "mt-0.5"), children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title &&
+                        (typeof title === "string" ? (jsx("div", { className: cn(toastTheme.titleStyle, !isTextOnly && "font-semibold"), children: title })) : (title)), subtitle &&
+                        (typeof subtitle === "string" ? (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })) : (subtitle)), action && (jsx("div", { className: "mt-4", children: isToastAction(action) ? (jsx(Button, { variant: "link", color: "primary", onClick: handleActionClick, children: action.label })) : (action) })), children] }), dismissible && (jsx("button", { type: "button", className: cn(toastTheme.closeButtonStyle, !isTextOnly && "mt-0.5"), onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: toastNode });
     }
     return toastNode;
 });
-Toast.displayName = 'Toast';
+Toast.displayName = "Toast";
 
 export { Toast };

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

@@ -6,15 +6,10 @@ const toastTheme = {
         default: "border border-[var(--color-border)] dark:border-white/10",
         glass: "glass-effect",
     },
-    iconStyle: "flex-shrink-0 size-5 mt-0.5",
-    iconCenteredStyle: "flex-shrink-0 size-5",
-    titleStyle: "font-semibold text-sm",
-    textOnlyStyle: "text-sm",
-    descriptionStyle: "text-sm mt-0.5 opacity-60",
-    actionStyle: "text-xs font-medium px-2 py-1 rounded border bg-white/80 hover:bg-white transition-colors cursor-pointer " +
-        "dark:bg-white/10 dark:border-white/20 dark:hover:bg-white/20 dark:text-white",
-    closeButtonStyle: "absolute top-2 right-2 flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
-    closeButtonCenteredStyle: "flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
+    iconStyle: "flex-shrink-0",
+    titleStyle: "text-base text-[var(--color-text-primary)]",
+    subtitleStyle: "text-base mt-1 text-[var(--color-text-secondary)]",
+    closeButtonStyle: "flex-shrink-0 size-5 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
     containerStyle: "fixed z-50 pointer-events-none",
 };
 

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

@@ -1,13 +1,13 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from "react";
 /**
  * Toast visual variant
  */
-export type ToastVariant = 'default' | 'glass';
+export type ToastVariant = "default" | "glass";
 /**
  * Toast state (e.g., loading indicator)
  */
-export type ToastState = 'default' | 'loading';
-export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type ToastState = "default" | "loading";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export interface ToastAction {
     label: string;
     onClick: () => void;
@@ -16,47 +16,29 @@ export interface ToastTheme {
     baseStyle: string;
     variants: Record<ToastVariant, string>;
     iconStyle: string;
-    iconCenteredStyle: string;
     titleStyle: string;
-    textOnlyStyle: string;
-    descriptionStyle: string;
-    actionStyle: string;
+    subtitleStyle: string;
     closeButtonStyle: string;
-    closeButtonCenteredStyle: string;
     containerStyle: string;
 }
-export interface ToastThemeOverrides {
-    baseStyle?: string;
-    variants?: Partial<Record<ToastVariant, string>>;
-    iconStyle?: string;
-    iconCenteredStyle?: string;
-    titleStyle?: string;
-    textOnlyStyle?: string;
-    descriptionStyle?: string;
-    actionStyle?: string;
-    closeButtonStyle?: string;
-    closeButtonCenteredStyle?: string;
-    containerStyle?: string;
-}
 export interface ToastData {
     id: string;
     variant?: ToastVariant;
     state?: ToastState;
-    title?: string;
-    description?: string;
+    title?: ReactNode;
+    subtitle?: ReactNode;
     icon?: ReactNode;
-    action?: ToastAction;
+    action?: ToastAction | ReactNode;
+    children?: ReactNode;
     duration?: number;
     dismissible?: boolean;
     onDismiss?: () => void;
 }
-export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /** Toast data */
     toast: ToastData;
     /** Custom class name */
     className?: string;
-    /** Theme overrides (deprecated - use className for customization) */
-    theme?: ToastThemeOverrides;
     /** Callback when toast is dismissed */
     onDismiss?: (id: string) => void;
     /** Index of toast in the stack */
@@ -93,7 +75,7 @@ export interface ToastProviderProps {
 }
 export interface ToastContextValue {
     toasts: ToastData[];
-    addToast: (toast: Omit<ToastData, 'id'>) => string;
+    addToast: (toast: Omit<ToastData, "id">) => string;
     removeToast: (id: string) => void;
     removeAllToasts: () => void;
 }
@@ -102,27 +84,28 @@ export interface UseToastOptions {
     state?: ToastState;
     duration?: number;
     dismissible?: boolean;
-    action?: ToastAction;
+    action?: ToastAction | ReactNode;
+    children?: ReactNode;
     icon?: ReactNode;
 }
 export interface UseToastReturn {
     toast: (title: string, options?: UseToastOptions & {
-        description?: string;
+        subtitle?: string;
     }) => string;
     success: (title: string, options?: UseToastOptions & {
-        description?: string;
+        subtitle?: string;
     }) => string;
     error: (title: string, options?: UseToastOptions & {
-        description?: string;
+        subtitle?: string;
     }) => string;
     warning: (title: string, options?: UseToastOptions & {
-        description?: string;
+        subtitle?: string;
     }) => string;
     info: (title: string, options?: UseToastOptions & {
-        description?: string;
+        subtitle?: string;
     }) => string;
-    loading: (title: string, options?: Omit<UseToastOptions, 'state'> & {
-        description?: string;
+    loading: (title: string, options?: Omit<UseToastOptions, "state"> & {
+        subtitle?: string;
     }) => string;
     dismiss: (id: string) => void;
     dismissAll: () => void;