@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,32 @@
+/**
+ * Default theme for Timeline components
+ * Uses CSS variables for design token integration
+ */
+const timelineTheme = {
+    // Root container - vertical layout
+    baseStyle: "relative flex flex-col",
+    // Root container - horizontal layout
+    baseStyleHorizontal: "relative flex flex-row items-start",
+    // Individual timeline item - vertical
+    itemStyle: "relative flex gap-4",
+    // Individual timeline item - horizontal
+    itemStyleHorizontal: "relative flex flex-col items-center flex-1 gap-3",
+    // Connector line - vertical (positioned on the marker column)
+    lineStyle: "absolute top-0 bottom-0 w-0.5 bg-[var(--color-border)]",
+    // Connector line - horizontal
+    lineStyleHorizontal: "absolute left-0 right-0 h-0.5 bg-[var(--color-border)]",
+    // Marker base styles (shared across statuses)
+    markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-200",
+    // Marker status-specific styles
+    markerStatuses: {
+        completed: "w-8 h-8 bg-[var(--color-success)] border-[var(--color-success)] text-white",
+        active: "w-8 h-8 bg-[var(--color-primary)] border-[var(--color-primary)] text-white ring-4 ring-[var(--color-primary-100)]",
+        pending: "w-8 h-8 bg-[var(--color-background)] border-[var(--color-border)]",
+    },
+    // Content area - vertical
+    contentStyle: "pb-8 pt-0.5 min-w-0",
+    // Content area - horizontal
+    contentStyleHorizontal: "text-center px-2 min-w-0",
+};
+
+export { timelineTheme };

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

@@ -0,0 +1,131 @@
+import React from "react";
+/**
+ * Layout orientation for the Timeline
+ */
+export type TimelineLayout = "vertical" | "horizontal";
+/**
+ * Alignment mode for vertical timeline items
+ * - left: all items on the left side of the line
+ * - right: all items on the right side of the line
+ * - alternate: items alternate between left and right
+ */
+export type TimelineAlign = "left" | "right" | "alternate";
+/**
+ * Status of an individual timeline item
+ * - completed: item is finished (success color)
+ * - active: item is currently in progress (primary color)
+ * - pending: item has not started yet (neutral/muted)
+ */
+export type TimelineItemStatus = "completed" | "active" | "pending";
+/**
+ * Theme overrides for Timeline
+ */
+export interface TimelineThemeOverrides {
+    baseStyle?: string;
+    baseStyleHorizontal?: string;
+    itemStyle?: string;
+    itemStyleHorizontal?: string;
+    lineStyle?: string;
+    lineStyleHorizontal?: string;
+    markerStyle?: string;
+    markerStatuses?: Partial<Record<TimelineItemStatus, string>>;
+    contentStyle?: string;
+    contentStyleHorizontal?: string;
+}
+/**
+ * Timeline root component props
+ */
+export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Layout orientation of the timeline
+     * @default 'vertical'
+     */
+    layout?: TimelineLayout;
+    /**
+     * Alignment of items relative to the timeline line (vertical only)
+     * @default 'left'
+     */
+    align?: TimelineAlign;
+    /**
+     * Theme overrides for customizing styles
+     */
+    theme?: TimelineThemeOverrides;
+    /**
+     * Children - should be Timeline.Item components
+     */
+    children: React.ReactNode;
+}
+/**
+ * Context value shared between Timeline compound components
+ */
+export interface TimelineContextValue {
+    layout: TimelineLayout;
+    align: TimelineAlign;
+    theme: TimelineThemeOverrides & {
+        baseStyle: string;
+        baseStyleHorizontal: string;
+        itemStyle: string;
+        itemStyleHorizontal: string;
+        lineStyle: string;
+        lineStyleHorizontal: string;
+        markerStyle: string;
+        markerStatuses: Record<TimelineItemStatus, string>;
+        contentStyle: string;
+        contentStyleHorizontal: string;
+    };
+    totalItems: number;
+}
+/**
+ * Timeline.Item component props
+ */
+export interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Status of the timeline item
+     * @default 'pending'
+     */
+    status?: TimelineItemStatus;
+    /**
+     * Optional className for styling
+     */
+    className?: string;
+    /**
+     * Item content - should include Timeline.Marker and Timeline.Content
+     */
+    children: React.ReactNode;
+}
+/**
+ * Context value for individual Timeline items
+ */
+export interface TimelineItemContextValue {
+    status: TimelineItemStatus;
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+}
+/**
+ * Timeline.Marker component props
+ */
+export interface TimelineMarkerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional custom icon to display inside the marker
+     * Uses a dot by default, CheckIcon for completed status
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional className for styling
+     */
+    className?: string;
+}
+/**
+ * Timeline.Content component props
+ */
+export interface TimelineContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content to display
+     */
+    children: React.ReactNode;
+    /**
+     * Optional className for styling
+     */
+    className?: string;
+}

package/dist/components/core/Timeline/TimelineContent.d.ts

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

package/dist/components/core/Timeline/TimelineContent.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useTimelineContext } from './Timeline.js';
+import { useTimelineItemContext } from './TimelineItem.js';
+
+const TimelineContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    const { theme, layout, align } = useTimelineContext();
+    const { isLast, index } = useTimelineItemContext();
+    const isHorizontal = layout === "horizontal";
+    // For alternate layout, determine text alignment
+    const isAlternateRight = align === "alternate" && index % 2 !== 0;
+    return (jsx("div", { ref: ref, className: cn(isHorizontal ? theme.contentStyleHorizontal : theme.contentStyle, 
+        // Remove bottom padding on last item
+        !isHorizontal && isLast && "pb-0", 
+        // Align text based on side in alternate mode
+        !isHorizontal && isAlternateRight && "text-right", !isHorizontal && align === "right" && "text-right", className), ...props, children: children }));
+});
+TimelineContent.displayName = "TimelineContent";
+
+export { TimelineContent };

package/dist/components/core/Timeline/TimelineItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TimelineItemProps, TimelineItemContextValue } from "./Timeline.types";
+export declare const useTimelineItemContext: () => TimelineItemContextValue;
+export declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Timeline/TimelineItem.js

@@ -0,0 +1,86 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { createContext, useRef, useState, useEffect, useContext } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useTimelineContext } from './Timeline.js';
+import { timelineHorizontalItemVariants, getDirectionalVariants, timelineItemVariants } from './Timeline.animations.js';
+
+// Create context for TimelineItem
+const TimelineItemContext = createContext(undefined);
+// Hook to use TimelineItem context
+const useTimelineItemContext = () => {
+    const ctx = useContext(TimelineItemContext);
+    if (!ctx)
+        throw new Error("Timeline.Marker and Timeline.Content must be used within Timeline.Item");
+    return ctx;
+};
+const TimelineItem = React__default.forwardRef(({ children, className, status = "pending", ...props }, ref) => {
+    const { layout, align, theme, totalItems } = useTimelineContext();
+    const shouldReduceMotion = useReducedMotion();
+    const itemRef = useRef(null);
+    const [isVisible, setIsVisible] = useState(false);
+    // Determine item index from parent
+    const resolvedRef = ref || itemRef;
+    // Find index among siblings for alternate layout
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        const element = resolvedRef && "current" in resolvedRef ? resolvedRef.current : itemRef.current;
+        if (element === null || element === void 0 ? void 0 : element.parentElement) {
+            const siblings = Array.from(element.parentElement.children);
+            const idx = siblings.indexOf(element);
+            setIndex(idx);
+        }
+    }, [resolvedRef]);
+    // IntersectionObserver for scroll-triggered animation
+    useEffect(() => {
+        const element = resolvedRef && "current" in resolvedRef ? resolvedRef.current : itemRef.current;
+        if (!element)
+            return;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setIsVisible(true);
+                observer.unobserve(element);
+            }
+        }, { threshold: 0.2 });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [resolvedRef]);
+    const isFirst = index === 0;
+    const isLast = index === totalItems - 1;
+    const isHorizontal = layout === "horizontal";
+    // Determine which side this item is on for alternate layout
+    const itemSide = align === "alternate"
+        ? index % 2 === 0
+            ? "left"
+            : "right"
+        : align;
+    // Select animation variants based on layout and alignment
+    const getVariants = () => {
+        if (shouldReduceMotion)
+            return undefined;
+        if (isHorizontal)
+            return timelineHorizontalItemVariants;
+        if (align === "alternate") {
+            return getDirectionalVariants(itemSide);
+        }
+        return timelineItemVariants;
+    };
+    // Context value for Marker and Content
+    const contextValue = {
+        status,
+        index,
+        isFirst,
+        isLast,
+    };
+    // Build className based on layout
+    const isAlternateRight = align === "alternate" && index % 2 !== 0;
+    // Filter out conflicting motion props from rest
+    const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, ...safeProps } = props;
+    const variants = getVariants();
+    return (jsx(TimelineItemContext.Provider, { value: contextValue, children: jsx(motion.div, { ref: ref || itemRef, className: cn(isHorizontal ? theme.itemStyleHorizontal : theme.itemStyle, 
+            // For right-aligned or alternate-right, reverse the flex direction
+            !isHorizontal && align === "right" && "flex-row-reverse", !isHorizontal && isAlternateRight && "flex-row-reverse", className), "data-status": status, "data-side": itemSide, "data-layout": layout, role: "listitem", initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));
+});
+TimelineItem.displayName = "TimelineItem";
+
+export { TimelineItem, useTimelineItemContext };

package/dist/components/core/Timeline/TimelineMarker.d.ts

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

package/dist/components/core/Timeline/TimelineMarker.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { CheckIcon } from '@heroicons/react/24/solid';
+import { cn } from '../../../utils/cn.js';
+import { useTimelineContext } from './Timeline.js';
+import { useTimelineItemContext } from './TimelineItem.js';
+import { timelineMarkerVariants } from './Timeline.animations.js';
+
+const TimelineMarker = React__default.forwardRef(({ icon, className, ...props }, ref) => {
+    const { theme, layout } = useTimelineContext();
+    const { status, isLast } = useTimelineItemContext();
+    const shouldReduceMotion = useReducedMotion();
+    // Determine the icon to render
+    const renderIcon = () => {
+        if (icon)
+            return icon;
+        if (status === "completed") {
+            return jsx(CheckIcon, { className: "w-4 h-4" });
+        }
+        if (status === "active") {
+            return jsx("span", { className: "w-2 h-2 rounded-full bg-white" });
+        }
+        // Pending: small neutral dot
+        return (jsx("span", { className: "w-2 h-2 rounded-full bg-[var(--color-text-muted)]" }));
+    };
+    const isHorizontal = layout === "horizontal";
+    const variants = shouldReduceMotion ? undefined : timelineMarkerVariants;
+    // Filter out conflicting motion props
+    const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, ...safeProps } = props;
+    return (jsxs("div", { className: cn("relative flex flex-col items-center", isHorizontal && "flex-row"), children: [jsx(motion.div, { ref: ref, className: cn(theme.markerStyle, theme.markerStatuses[status], className), "data-status": status, "aria-label": `${status} step`, initial: variants ? "hidden" : undefined, animate: variants ? "visible" : undefined, variants: variants, ...safeProps, children: renderIcon() }), !isLast && !isHorizontal && (jsx("div", { className: cn("w-0.5 flex-1 min-h-4", status === "completed"
+                    ? "bg-[var(--color-success)]"
+                    : "bg-[var(--color-border)]"), "aria-hidden": "true" })), !isLast && isHorizontal && (jsx("div", { className: cn("h-0.5 flex-1 min-w-4", status === "completed"
+                    ? "bg-[var(--color-success)]"
+                    : "bg-[var(--color-border)]"), "aria-hidden": "true" }))] }));
+});
+TimelineMarker.displayName = "TimelineMarker";
+
+export { TimelineMarker };

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

@@ -0,0 +1,4 @@
+import { Timeline } from "./Timeline";
+import { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineAlign, TimelineItemStatus } from "./Timeline.types";
+export { Timeline };
+export type { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineAlign, TimelineItemStatus, };

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

@@ -0,0 +1,31 @@
+export declare const toastAnimations: {
+    initial: {
+        opacity: number;
+        y: number;
+        scale: number;
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+        transition: {
+            duration: number;
+        };
+    };
+    transition: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
+};
+export declare const getToastStackingAnimation: (index: number, totalToasts: number, isExpanded: boolean, expandedY?: number) => {
+    y?: undefined;
+    scale?: undefined;
+    zIndex?: undefined;
+    opacity?: undefined;
+} | {
+    y: number;
+    scale: number;
+    zIndex: number;
+    opacity: number;
+};

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

@@ -0,0 +1,55 @@
+const toastAnimations = {
+    // Initial state when toast appears
+    initial: {
+        opacity: 0,
+        y: 50,
+        scale: 0.3,
+    },
+    // Exit animation when toast is dismissed
+    exit: {
+        opacity: 0,
+        scale: 0.5,
+        transition: { duration: 0.2 },
+    },
+    // Spring transition configuration
+    transition: {
+        type: "spring",
+        stiffness: 500,
+        damping: 30,
+        mass: 1,
+    },
+};
+// Stacking animation utilities
+const getToastStackingAnimation = (index, totalToasts, isExpanded, expandedY) => {
+    if (totalToasts === 1)
+        return {};
+    const maxVisible = 3; // Show max 3 toasts in stack
+    const stackIndex = Math.min(index, maxVisible - 1);
+    if (isExpanded) {
+        return {
+            y: expandedY !== null && expandedY !== void 0 ? expandedY : index * 80,
+            scale: 1,
+            zIndex: totalToasts - index,
+            opacity: 1,
+        };
+    }
+    else {
+        // Stacked state - compress toasts
+        if (index >= maxVisible) {
+            return {
+                y: (maxVisible - 1) * 10,
+                scale: 1 - (maxVisible - 1) * 0.08,
+                zIndex: 0,
+                opacity: 0.3,
+            };
+        }
+        return {
+            y: stackIndex * 10,
+            scale: 1 - stackIndex * 0.08,
+            zIndex: totalToasts - index,
+            opacity: 1 - stackIndex * 0.25,
+        };
+    }
+};
+
+export { getToastStackingAnimation, toastAnimations };

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,84 @@
+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 { toastTheme } from './Toast.theme.js';
+import { toastAnimations, getToastStackingAnimation } from './Toast.animations.js';
+import { ArrowPathIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
+
+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 internalRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        internalRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [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 resolvedIcon = icon || defaultIcon;
+    // Auto-dismiss after 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]);
+    // Report measured height to parent
+    useEffect(() => {
+        if (internalRef.current && onHeightChange) {
+            const height = internalRef.current.offsetHeight;
+            onHeightChange(id, height);
+        }
+    }, [id, onHeightChange, title, description]);
+    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();
+        }
+    };
+    const stackingStyle = getToastStackingAnimation(index, totalToasts, isExpanded, expandedOffset);
+    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
+        });
+    }, [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,
+            left: index > 0 ? 0 : 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" }) }))] }));
+    if (darkMode) {
+        return jsx("div", { className: "dark", children: toastNode });
+    }
+    return toastNode;
+});
+Toast.displayName = 'Toast';
+
+export { Toast };

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

@@ -0,0 +1,2 @@
+import { ToastTheme } from "./Toast.types";
+export declare const toastTheme: ToastTheme;

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

@@ -0,0 +1,21 @@
+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",
+    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",
+    containerStyle: "fixed z-50 pointer-events-none",
+};
+
+export { toastTheme };

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

@@ -0,0 +1,129 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Toast visual variant
+ */
+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 interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ToastTheme {
+    baseStyle: string;
+    variants: Record<ToastVariant, string>;
+    iconStyle: string;
+    iconCenteredStyle: string;
+    titleStyle: string;
+    textOnlyStyle: string;
+    descriptionStyle: 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;
+    descriptionStyle?: string;
+    actionStyle?: string;
+    closeButtonStyle?: string;
+    closeButtonCenteredStyle?: string;
+    containerStyle?: string;
+}
+export interface ToastData {
+    id: string;
+    variant?: ToastVariant;
+    state?: ToastState;
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    action?: ToastAction;
+    duration?: number;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    /** 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 */
+    index?: number;
+    /** Whether the toast stack is expanded */
+    isExpanded?: boolean;
+    /** Total number of toasts in the stack */
+    totalToasts?: number;
+    /** Mouse enter handler for hover management */
+    onMouseEnter?: () => void;
+    /** Mouse leave handler for hover management */
+    onMouseLeave?: () => void;
+    /** Callback when toast height is measured */
+    onHeightChange?: (id: string, height: number) => void;
+    /** Pre-calculated y-offset for expanded state */
+    expandedOffset?: number;
+    /**
+     * Enable dark mode styling. When true, applies the `dark` class so components
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+    position?: ToastPosition;
+    maxToasts?: number;
+    defaultDuration?: number;
+    /**
+     * Enable dark mode styling for all toasts.
+     * @default false
+     */
+    darkMode?: boolean;
+}
+export interface ToastContextValue {
+    toasts: ToastData[];
+    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;
+    icon?: ReactNode;
+}
+export interface UseToastReturn {
+    toast: (title: string, options?: UseToastOptions & {
+        description?: string;
+    }) => string;
+    success: (title: string, options?: UseToastOptions & {
+        description?: string;
+    }) => string;
+    error: (title: string, options?: UseToastOptions & {
+        description?: string;
+    }) => string;
+    warning: (title: string, options?: UseToastOptions & {
+        description?: string;
+    }) => string;
+    info: (title: string, options?: UseToastOptions & {
+        description?: string;
+    }) => string;
+    loading: (title: string, options?: Omit<UseToastOptions, 'state'> & {
+        description?: string;
+    }) => string;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}