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

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

@@ -1,8 +1,10 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { motion } from 'motion/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { X } from '@phosphor-icons/react';
 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 +15,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, animated = true, 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 +37,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 +45,41 @@ 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", { 
+                // leading-[0] collapses the inline line-box strut: the Avatar's
+                // inner circle is inline-flex, so a non-zero line-height adds
+                // descender space below it and pins the circle to the top of a
+                // taller line box — the visible photo then renders ~1.75px high.
+                // Zeroing the line-height makes the 16px circle define the box exactly.
+                className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full leading-[0] -ml-0.5", theme.avatarSizes[size]), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, size: "xs", className: "bg-[var(--color-surface-hover)] border  border-[var(--color-border)]" }) }));
+        }
+        if (startContent) {
+            return (jsx("span", { 
+                // leading-[0]: same line-box collapse as the avatar wrapper above,
+                // so inline startContent (icons/emoji) stays vertically centered.
+                className: cn("inline-flex items-center justify-center shrink-0 leading-[0]", theme.startContentSizes[size]), children: startContent }));
+        }
+        return null;
+    };
+    const content = (jsxs(Fragment, { children: [renderLeadingContent(), children, showRemoveButton && (jsx("button", { type: "button", onClick: handleRemove, className: theme.removeButtonStyle, "aria-label": `Remove ${typeof children === "string" ? children : "tag"}`, children: jsx(X, { className: theme.removeIconSizes[size] }) }))] }));
+    const sharedProps = {
+        ref,
+        className: cn(theme.baseStyle, theme.sizes[size], hasLeadingContent && "pl-1", showRemoveButton && "pr-0.5", disabled && theme.disabledStyle, className),
+        "data-size": size,
+        "data-disabled": disabled ? "true" : "false",
+        "data-removable": removable ? "true" : "false",
+        "data-has-avatar": avatar ? "true" : "false",
+        ...props,
+    };
+    // Plain span when animation is opted out (e.g. inside a contentEditable host,
+    // where Framer-Motion's layout FLIP fights the caret on every keystroke).
+    if (!animated) {
+        return jsx("span", { ...sharedProps, children: content });
+    }
+    return (jsx(motion.span, { ...sharedProps, layout: true, transition: tagLayoutTransition, variants: tagVariants, exit: "exit", children: content }));
 });
 Tag.displayName = "Tag";
 

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

@@ -1,14 +1,29 @@
 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.5 font-medium rounded-full " +
+        "bg-[var(--color-surface-raised)] border border-[var(--color-border)] " +
         "text-[var(--color-text-primary)]",
+    // Paddings tokenised (--tag-px-*/--tag-py-*, + --tag-pl-md for md's larger
+    // left inset) so a theme can grow the chip tier — defaults px-2/px-2+pl-2.5.
     sizes: {
-        sm: "text-xs px-2.5 py-0.5",
-        md: "text-sm px-2.5 py-0.5",
+        sm: "text-xs px-[var(--tag-px-sm)] py-[var(--tag-py-sm)]",
+        md: "text-sm px-[var(--tag-px-md)] pl-[var(--tag-pl-md)] py-[var(--tag-py-md)]",
+    },
+    // No left margin here: the avatar/icon's left inset is owned by the tag's
+    // `pl-1` (applied when there's leading content), not by a per-size `ml-*`.
+    // Stacking `ml-*` on top of that padding pushed the avatar too far from the
+    // left edge and produced a lopsided pill. The avatar-to-text gap is handled
+    // by the base `gap-1`, not by this margin.
+    avatarSizes: {
+        sm: "size-4",
+        md: "size-5",
+    },
+    startContentSizes: {
+        sm: "",
+        md: "",
     },
     disabledStyle: "opacity-50 cursor-not-allowed",
-    removeButtonStyle: "inline-flex items-center justify-center rounded-full p-1 " +
-        "hover:bg-[var(--color-background-quaternary)] " +
+    removeButtonStyle: "inline-flex items-center justify-center rounded-full p-0.5 -ml-1 " +
+        "hover:bg-[var(--color-surface-hover)] " +
         "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] " +
         "transition-all duration-300 cursor-pointer focus:outline-none " +
         "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",

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,8 +11,32 @@ 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;
+    /**
+     * Whether to render with motion (layout + enter/exit animation). Default true.
+     * Set `false` to render a plain `<span>` — required when a Tag lives inside a
+     * contentEditable host (e.g. Mention chips), where Framer-Motion's `layout`
+     * FLIP re-measurement fights the browser's caret/selection on every keystroke.
+     */
+    animated?: boolean;
     /** Additional class name for the tag */
     className?: string;
     /** Theme overrides */
@@ -24,6 +48,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 +62,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.animations.d.ts

@@ -9,16 +9,17 @@ export declare const toastAnimations: {
         scale: number;
         transition: {
             duration: number;
+            ease: "easeIn";
         };
     };
     transition: {
         type: "spring";
         stiffness: number;
         damping: number;
-        mass: number;
     };
 };
-export declare const getToastStackingAnimation: (index: number, totalToasts: number, isExpanded: boolean, expandedY?: number) => {
+import { ToastPosition } from "./Toast.types";
+export declare const getToastStackingAnimation: (index: number, totalToasts: number, isExpanded: boolean, expandedY?: number, position?: ToastPosition) => {
     y?: undefined;
     scale?: undefined;
     zIndex?: undefined;

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

@@ -1,33 +1,36 @@
+import '../../../theme/ThemeContext.js';
+import '../../../theme/SurfaceContext.js';
+import { springs } from '../../../theme/animations.js';
+
 const toastAnimations = {
-    // Initial state when toast appears
+    // Initial state when toast appears (subtle slide up + scale in)
     initial: {
         opacity: 0,
-        y: 50,
-        scale: 0.3,
+        y: 24,
+        scale: 0.94,
     },
-    // Exit animation when toast is dismissed
+    // Exit animation when toast is dismissed (quick fade out + scale down)
     exit: {
         opacity: 0,
-        scale: 0.5,
-        transition: { duration: 0.2 },
-    },
-    // Spring transition configuration
-    transition: {
-        type: "spring",
-        stiffness: 500,
-        damping: 30,
-        mass: 1,
+        scale: 0.94,
+        transition: { duration: 0.15, ease: "easeIn" },
     },
+    // Premium spring transition configuration
+    transition: springs.premium,
 };
 // Stacking animation utilities
-const getToastStackingAnimation = (index, totalToasts, isExpanded, expandedY) => {
+const getToastStackingAnimation = (index, totalToasts, isExpanded, expandedY, position) => {
+    var _a;
     if (totalToasts === 1)
         return {};
+    const isBottom = (_a = position === null || position === void 0 ? void 0 : position.startsWith("bottom")) !== null && _a !== void 0 ? _a : false;
+    const directionMultiplier = isBottom ? -1 : 1;
     const maxVisible = 3; // Show max 3 toasts in stack
     const stackIndex = Math.min(index, maxVisible - 1);
     if (isExpanded) {
+        const yVal = expandedY !== undefined ? expandedY * directionMultiplier : index * 80 * directionMultiplier;
         return {
-            y: expandedY !== null && expandedY !== void 0 ? expandedY : index * 80,
+            y: yVal,
             scale: 1,
             zIndex: totalToasts - index,
             opacity: 1,
@@ -37,14 +40,14 @@ const getToastStackingAnimation = (index, totalToasts, isExpanded, expandedY) =>
         // Stacked state - compress toasts
         if (index >= maxVisible) {
             return {
-                y: (maxVisible - 1) * 10,
+                y: (maxVisible - 1) * 10 * directionMultiplier,
                 scale: 1 - (maxVisible - 1) * 0.08,
                 zIndex: 0,
                 opacity: 0.3,
             };
         }
         return {
-            y: stackIndex * 10,
+            y: stackIndex * 10 * directionMultiplier,
             scale: 1 - stackIndex * 0.08,
             zIndex: totalToasts - index,
             opacity: 1 - stackIndex * 0.25,

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

@@ -1,18 +1,26 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useRef, useCallback, useEffect, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 import { toastTheme } from './Toast.theme.js';
-import { toastAnimations, getToastStackingAnimation } from './Toast.animations.js';
-import { ArrowPathIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { getToastStackingAnimation, toastAnimations } from './Toast.animations.js';
+import { ArrowsClockwise, Info, X } from '@phosphor-icons/react';
+import { Link } from '../Link/Link.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) => {
-    var _a;
+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, elevation, lift, position, ...props }, ref) => {
+    // Grounded overlay: a toast portals to a page-level toaster, so it paints a FIXED rung 5
+    // (a punchy overlay shade) rather than inheriting whatever surface its trigger sat in.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 5, ground: true, elevation, lift });
     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,21 +28,38 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
         }
     }, [ref]);
     const shouldReduceMotion = useReducedMotion();
-    const { id, variant = 'default', state = 'default', title, subtitle, icon, action, duration = 5000, dismissible = true, } = toast;
-    const isTextOnly = !subtitle && !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, state = "default", color, title, subtitle, icon, action, children, duration = 5000, dismissible = true, } = toast;
+    const isTextOnly = !subtitle && !action && !children;
+    // Per-toast live-region role, driven by severity: `danger`/`warning` are
+    // urgent (role="alert" ~ implicit aria-live="assertive"), everything else
+    // is a routine update (role="status" ~ implicit aria-live="polite"). The
+    // shared toaster container (ToastProvider) keeps its own
+    // `aria-live="polite"` and does NOT get a role — the two announcement
+    // mechanisms would otherwise double up. Instead, each toast is inserted
+    // as a fully-formed subtree (role included at mount, not added after),
+    // so assistive tech announces it exactly once, using this more specific
+    // role/urgency rather than the container's generic "polite" default.
+    const toastRole = color === "danger" || color === "warning" ? "alert" : "status";
+    const defaultIcon = state === "loading" ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowsClockwise, { className: "w-5 h-5" }) })) : (jsx(Info, { className: "w-5 h-5" }));
     const resolvedIcon = icon || defaultIcon;
-    // Auto-dismiss after duration
+    // Auto-dismiss after duration (pauses when hovered/expanded, then RESUMES the remaining
+    // time rather than restarting the full countdown — otherwise intermittent hover keeps
+    // resetting the timer and the toast never dismisses).
+    const remainingRef = useRef(duration);
     useEffect(() => {
-        if (duration > 0 && dismissible) {
-            const timer = setTimeout(() => {
-                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
-            }, duration);
-            return () => clearTimeout(timer);
-        }
-    }, [duration, dismissible, id, onDismiss]);
+        remainingRef.current = duration;
+    }, [duration]);
+    useEffect(() => {
+        if (!(duration > 0 && dismissible) || isExpanded)
+            return;
+        const start = Date.now();
+        const remaining = remainingRef.current;
+        const timer = setTimeout(() => onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id), remaining);
+        return () => {
+            clearTimeout(timer);
+            remainingRef.current = Math.max(0, remaining - (Date.now() - start));
+        };
+    }, [duration, dismissible, id, onDismiss, isExpanded]);
     // Report measured height to parent
     useEffect(() => {
         if (internalRef.current && onHeightChange) {
@@ -46,39 +71,49 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
         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);
+    const stackingStyle = getToastStackingAnimation(index, totalToasts, isExpanded, expandedOffset, position);
     const animateValue = useMemo(() => {
         var _a, _b, _c, _d;
         return ({
             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'),
-            top: index > 0 ? 0 : undefined,
+            position: (index > 0
+                ? "absolute"
+                : "relative"),
+            top: index > 0 && !(position === null || position === void 0 ? void 0 : position.startsWith("bottom")) ? 0 : undefined,
+            bottom: index > 0 && (position === null || position === void 0 ? void 0 : position.startsWith("bottom")) ? 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
+    }, [stackingStyle.zIndex, index, position]);
+    const toastNode = (jsx(motion.div, { ref: setRefs, role: toastRole, 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 })), subtitle && (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })), 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(surfaceClasses(surfaceLevel, { translucent: true, shadow: true }), toastTheme.baseStyle, isTextOnly && "items-center", "pointer-events-auto", index > 0 && !isExpanded && "absolute top-0 left-0", className), style: styleValue, children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [jsx("div", { className: cn(toastTheme.iconStyle, !isTextOnly && "mt-0.5"), children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && jsx("div", { className: toastTheme.titleStyle, children: title }), subtitle && (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })), action && (jsx("div", { className: "mt-4", children: isToastAction(action) ? (jsx(Link, { color: "primary", size: "sm", 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(X, { 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

@@ -1,20 +1,12 @@
 const toastTheme = {
-    baseStyle: "flex items-start gap-3 rounded-[var(--toast-radius)] px-4 py-3 shadow-2xl backdrop-blur-sm w-full ring-[0.5px] ring-white dark:ring-white/10 dark:shadow-black/40 " +
-        "bg-white/80 text-[var(--color-text-primary)] " +
-        "dark:bg-[var(--color-background-secondary)]/60",
-    variants: {
-        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",
-    subtitleStyle: "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",
+    // bg + drop shadow come from the relative-elevation engine (surfaceClasses) at runtime;
+    // keep the frosted blur + ring + border + radius here.
+    baseStyle: "flex items-start gap-3 rounded-[var(--toast-radius)] px-4 py-3 backdrop-blur-sm w-full ring-[0.5px] ring-white dark:ring-white/10 " +
+        "text-[var(--color-text-primary)] border border-[var(--color-border)]",
+    iconStyle: "flex-shrink-0",
+    titleStyle: "text-sm text-[var(--color-text-primary)] font-semibold",
+    subtitleStyle: "text-sm 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,62 +1,46 @@
-import { HTMLAttributes, ReactNode } from 'react';
-/**
- * Toast visual variant
- */
-export type ToastVariant = 'default' | 'glass';
+import { HTMLAttributes, ReactNode } from "react";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
+import type { SemanticColor } from "../../../utils/colorUtils";
 /**
  * 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;
 }
 export interface ToastTheme {
     baseStyle: string;
-    variants: Record<ToastVariant, string>;
     iconStyle: string;
-    iconCenteredStyle: string;
     titleStyle: string;
-    textOnlyStyle: string;
     subtitleStyle: string;
-    actionStyle: 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;
-    subtitleStyle?: string;
-    actionStyle?: string;
-    closeButtonStyle?: string;
-    closeButtonCenteredStyle?: string;
-    containerStyle?: string;
-}
 export interface ToastData {
     id: string;
-    variant?: ToastVariant;
     state?: ToastState;
-    title?: string;
-    subtitle?: string;
+    /**
+     * Semantic severity of the toast. Drives the per-toast live-region role
+     * (`danger`/`warning` -> `role="alert"`, everything else -> `role="status"`)
+     * as well as `useToast()`'s convenience-method icon color.
+     * @default "mono"
+     */
+    color?: SemanticColor;
+    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 */
@@ -73,12 +57,21 @@ export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
     onHeightChange?: (id: string, height: number) => void;
     /** Pre-calculated y-offset for expanded state */
     expandedOffset?: number;
+    /** Toast position */
+    position?: ToastPosition;
     /**
      * Enable dark mode styling. When true, applies the `dark` class so components
      * use light colors for visibility.
      * @default false
      */
     darkMode?: boolean;
+    /**
+     * Pin the surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the toast's base rung. */
+    lift?: boolean;
 }
 export interface ToastProviderProps {
     children: ReactNode;
@@ -93,36 +86,36 @@ 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;
 }
 export interface UseToastOptions {
-    variant?: ToastVariant;
     state?: ToastState;
     duration?: number;
     dismissible?: boolean;
-    action?: ToastAction;
+    action?: ToastAction | ReactNode;
+    children?: ReactNode;
     icon?: ReactNode;
 }
 export interface UseToastReturn {
-    toast: (title: string, options?: UseToastOptions & {
-        subtitle?: string;
+    toast: (title: ReactNode, options?: UseToastOptions & {
+        subtitle?: ReactNode;
     }) => string;
-    success: (title: string, options?: UseToastOptions & {
-        subtitle?: string;
+    success: (title: ReactNode, options?: UseToastOptions & {
+        subtitle?: ReactNode;
     }) => string;
-    error: (title: string, options?: UseToastOptions & {
-        subtitle?: string;
+    error: (title: ReactNode, options?: UseToastOptions & {
+        subtitle?: ReactNode;
     }) => string;
-    warning: (title: string, options?: UseToastOptions & {
-        subtitle?: string;
+    warning: (title: ReactNode, options?: UseToastOptions & {
+        subtitle?: ReactNode;
     }) => string;
-    info: (title: string, options?: UseToastOptions & {
-        subtitle?: string;
+    info: (title: ReactNode, options?: UseToastOptions & {
+        subtitle?: ReactNode;
     }) => string;
-    loading: (title: string, options?: Omit<UseToastOptions, 'state'> & {
-        subtitle?: string;
+    loading: (title: ReactNode, options?: Omit<UseToastOptions, "state"> & {
+        subtitle?: ReactNode;
     }) => string;
     dismiss: (id: string) => void;
     dismissAll: () => void;