@catalystsoftware/ui 1.0.4 → 1.0.5

package/dist/components/catalyst-ui/core/feedback/toast.tsx

@@ -0,0 +1,1857 @@
+import * as React from "react"
+import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react"
+import { X, CheckCircle, AlertTriangle, XCircle, Info, Loader2 } from "lucide-react"
+import { Button, } from "~/components/catalyst-ui"
+import { cn } from "~/components/catalyst-ui"
+import { motion, AnimatePresence } from 'framer-motion'
+
+/**
+* ★ ━━━━ ☆ ━━━━ Toast System ━━━━ ☆ ━━━━ ★
+* import { useToasted } from '~/components/catalyst-ui'
+* 
+* const { toast } = useToasted()                                                           
+* toast.default('default', 'Accent default toast', { variant: 'accent' })
+* toast.success('success', 'Accent success toast', { variant: 'accent' })
+* toast.warning('warning!', 'Simple warning toast', { variant: 'accent' })
+* toast.error('error!', 'Simple error toast', { variant: 'accent' })
+* toast.info('info!', 'Simple info toast', { variant: 'accent' })   
+* toast.loading('loading!', 'Simple loading toast', { variant: 'accent' })   
+* 
+* 
+* 
+* type ToastType = 'default' | 'success' | 'warning' | 'error' | 'info' | 'loading'
+* type ToastVariant = 'simple' | 'bordered' | 'filled' | 'accent' | 'banner' | 'card' | 'minimal' | 'soft'
+* type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left'
+* 
+* ★ ━━━━ ☆ ━━━━ USAGE ━━━━ ☆ ━━━━ ★
+* 
+* ★ ━━━━━━━━━ Basic Setup ━━━━━━━━━ ★
+* \`\`\`jsx
+* // Wrap your app with Toasty provider
+* import { Toasty } from "./ToastSystem";
+* 
+* function App() {
+*   return (
+*     <Toasty position="top-right" limit={5}>
+*       <YourApp />
+*     </Toasty>
+*   );
+* }
+* 
+* // In any child component, use the hook
+* import { useToasted } from "./ToastSystem";
+* 
+* function MyComponent() {
+*   const { toast } = useToasted();
+*   
+*   return (
+*     <button onClick={() => toast.success("Operation successful!")}>
+*       Show Toast
+*     </button>
+*   );
+* }
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Basic Toast Methods ━━━━━━━━━ ★
+* \`\`\`jsx
+* const { toast } = useToasted();
+* 
+* // Success toast
+* toast.success("Operation completed successfully!");
+* 
+* // Error toast
+* toast.error("Something went wrong!");
+* 
+* // Warning toast
+* toast.warning("Please check your input.");
+* 
+* // Info toast
+* toast.info("New update available.");
+* 
+* // Loading toast
+* const loadingId = toast.loading("Processing...");
+* // Later: manually dismiss or update
+* 
+* // Default toast
+* toast.default("Default notification.");
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Toast with Description ━━━━━━━━━ ★
+* \`\`\`jsx
+* toast.success(
+*   "File uploaded", 
+*   "Your file has been uploaded successfully and is now available for download.",
+*   { variant: "accent" }
+* );
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Toast with Action Button ━━━━━━━━━ ★
+* \`\`\`jsx
+* toast.info(
+*   "New message received",
+*   "You have a new message from John",
+*   {
+*     variant: "card",
+*     action: {
+*       label: "View",
+*       onClick: () => navigate("/messages")
+*     }
+*   }
+* );
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Toast with Custom Icon ━━━━━━━━━ ★
+* \`\`\`jsx
+* import { StarIcon } from "lucide-react";
+* 
+* toast.default(
+*   "Added to favorites",
+*   "This item has been added to your favorites list.",
+*   {
+*     icon: <StarIcon className="w-5 h-5" />,
+*     variant: "soft"
+*   }
+* );
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Promise Handling ━━━━━━━━━ ★
+* \`\`\`jsx
+* // Auto-handles loading, success, and error states
+* const handleUpload = async () => {
+*   try {
+*     await toast.promise(
+*       uploadFile(file), // Your async function
+*       {
+*         loading: "Uploading file...",
+*         success: (data) => `File uploaded: ${data.filename}`,
+*         error: (err) => `Upload failed: ${err.message}`,
+*         description: "Please wait while we process your file.",
+*         variant: "bordered"
+*       }
+*     );
+*   } catch (error) {
+*     // Error already handled by toast
+*   }
+* };
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Manual Toast Management ━━━━━━━━━ ★
+* \`\`\`jsx
+* const { toast, removeToast, updateToast } = useToasted();
+* 
+* // Show loading toast and get its ID
+* const toastId = toast.loading("Processing...");
+* 
+* // Update it later
+* updateToast(toastId, {
+*   type: "success",
+*   title: "Process complete!",
+*   duration: 3000,
+*   dismissible: true
+* });
+* 
+* // Or manually dismiss
+* removeToast(toastId);
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Toast Variants ━━━━━━━━━ ★
+* \`\`\`jsx
+* // Simple (default)
+* toast.success("Success!", { variant: "simple" });
+* 
+* // Bordered
+* toast.warning("Warning!", { variant: "bordered" });
+* 
+* // Filled
+* toast.error("Error!", { variant: "filled" });
+* 
+* // Accent (left border)
+* toast.info("Information", { variant: "accent" });
+* 
+* // Banner
+* toast.default("Announcement", { variant: "banner" });
+* 
+* // Card
+* toast.success("Profile updated", { variant: "card" });
+* 
+* // Minimal
+* toast.info("New notification", { variant: "minimal" });
+* 
+* // Soft
+* toast.success("Changes saved", { variant: "soft" });
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Toast Positions ━━━━━━━━━ ★
+* \`\`\`jsx
+* // Global position (in Toasty provider)
+* <Toasty position="top-right">
+* 
+* // Per-toast position (overrides global)
+* toast.success("Custom position!", {
+*   position: "bottom-left",
+*   variant: "accent"
+* });
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Interactive Features ━━━━━━━━━ ★
+* \`\`\`jsx
+* // Expandable long content
+* toast.info(
+*   "Long Notification",
+*   "This is a very long message that will be truncated initially. Click to expand and see the full content. You can also drag to dismiss and hover to pause auto-dismissal.",
+*   {
+*     collapseThreshold: 100, // Characters before truncation
+*     variant: "card",
+*     duration: 8000
+*   }
+* );
+* 
+* // Non-dismissible toast (for loading states)
+* toast.loading("Processing...", {
+*   dismissible: false,
+*   duration: 0 // No auto-dismiss
+* });
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Stacking and Queuing ━━━━━━━━━ ★
+* \`\`\`jsx
+* // Multiple toasts of same type stack
+* toast.success("Task 1 completed");
+* toast.success("Task 2 completed"); // Shows as "2x"
+* 
+* // Queue system when limit reached
+* // Max 3 visible toasts
+* <Toasty limit={3}> 
+* 
+* // Grouped by type and title
+* toast.info("New message from Alice");
+* toast.info("New message from Bob"); // Groups with previous
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Props & Options ━━━━━━━━━ ★
+* 
+* Toast Options:
+* - `type`: ToastType - Toast type (auto-set by method)
+* - `variant`: ToastVariant - Visual style variant
+* - `title`: string | React.ReactNode - Main message
+* - `description`: string | React.ReactNode - Optional description
+* - `duration`: number - Auto-dismiss timeout (ms, 0 = no auto-dismiss)
+* - `dismissible`: boolean - Whether user can dismiss (default: true)
+* - `action`: { label: string, onClick: () => void } - Action button
+* - `icon`: React.ReactNode - Custom icon override
+* - `position`: ToastPosition - Display position
+* - `collapseThreshold`: number - Character count before truncation
+* 
+* Promise Options (for toast.promise):
+* - `loading`: string | React.ReactNode - Loading message
+* - `success`: string | React.ReactNode | ((data: any) => string | React.ReactNode)
+* - `error`: string | React.ReactNode | ((error: any) => string | React.ReactNode)
+* - `description`: string | React.ReactNode - Optional description
+* - `duration`: number - Auto-dismiss timeout
+* - `variant`: ToastVariant - Visual style
+* 
+* Toasty Provider Props:
+* - `position`: ToastPosition - Default position (default: "top-center")
+* - `limit`: number - Maximum visible toasts (default: 3)
+* - `children`: React.ReactNode - Your app content
+* 
+* ★ ━━━━━━━━━ Keyboard Shortcuts ━━━━━━━━━ ★
+* - `Escape`: Dismiss the most recent toast
+* 
+* ★ ━━━━━━━━━ Features ━━━━━━━━━ ★
+* - 🔄 **Auto-stacking**: Groups similar toasts
+* - ⏳ **Queue system**: Manages overflow when limit reached
+* - 🎨 **8 visual variants**: From simple to card styles
+* - 📍 **6 positions**: All screen corners + centers
+* - ⌨️ **Keyboard support**: Escape to dismiss
+* - 🖱️ **Interactive**: Hover to pause, click to expand, drag to dismiss
+* - 🔄 **Promise support**: Auto-handles async states
+* - 📱 **Touch friendly**: Swipe to dismiss
+* - ⏸️ **Auto-pause**: Hover pauses auto-dismissal
+* 
+* ★ ━━━━━━━━━ Advanced Usage Example ━━━━━━━━━ ★
+* \`\`\`jsx
+* const { toast } = useToasted();
+* 
+* const handleComplexOperation = async () => {
+*   const toastId = toast.loading("Starting process...", {
+*     variant: "accent",
+*     dismissible: false,
+*     position: "bottom-right"
+*   });
+* 
+*   // Update progress
+*   setTimeout(() => {
+*     toast.update(toastId, {
+*       title: "Processing step 1/3",
+*       description: "Fetching data..."
+*     });
+*   }, 1000);
+* 
+*   try {
+*     const result = await complexOperation();
+*     
+*     toast.update(toastId, {
+*       type: "success",
+*       title: "Operation complete!",
+*       description: \`Result: \${result}\`,
+*       duration: 5000,
+*       dismissible: true,
+*       variant: "card",
+*       action: {
+*         label: "View Details",
+*         onClick: () => showDetails(result)
+*       }
+*     });
+*   } catch (error) {
+*     toast.update(toastId, {
+*       type: "error",
+*       title: "Operation failed",
+*       description: error.message,
+*       duration: 8000,
+*       dismissible: true,
+*       variant: "filled"
+*     });
+*   }
+* };
+* \`\`\`
+* 
+* ★ ━━━━━━━━━ Visual Variants Preview ━━━━━━━━━ ★
+* 
+* Simple: Clean border, subtle colors
+* Bordered: Thick colored borders, elevated
+* Filled: Solid colored backgrounds
+* Accent: Left border accent, subtle background
+* Banner: Rounded, prominent background
+* Card: Card-like with border and shadow
+* Minimal: Transparent, text-only
+* Soft: Light background with colored border
+* 
+* Each variant has unique styling for all 6 toast types.
+* 
+*/
+
+interface ToastAction {
+  label: string
+  onClick: () => void
+}
+interface Toast {
+  id: string
+  type: 'default' | 'success' | 'warning' | 'error' | 'info' | 'loading'
+  variant?: 'simple' | 'bordered' | 'filled' | 'accent' | 'banner' | 'card' | 'minimal' | 'soft'
+  title: string | React.ReactNode
+  description?: string | React.ReactNode
+  duration?: number
+  dismissible?: boolean
+  action?: ToastAction
+  icon?: React.ReactNode
+  position?: 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left'
+  collapseThreshold?: number
+}
+interface PromiseOptions {
+  loading: string | React.ReactNode
+  success: string | React.ReactNode | ((data: any) => string | React.ReactNode)
+  error: string | React.ReactNode | ((error: any) => string | React.ReactNode)
+  description?: string | React.ReactNode
+  duration?: number
+  variant?: Toast['variant']
+}
+
+interface ToastContextType {
+  toasts: Toast[]
+  addToast: (toast: Omit<Toast, 'id'>) => string
+  removeToast: (id: string) => void
+  updateToast: (id: string, toast: Partial<Toast>) => void
+  toast: {
+    success: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) => string
+    warning: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) => string
+    error: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) => string
+    info: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) => string
+    loading: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) => string
+    default: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) => string
+    promise: <T>(promise: Promise<T>, options: PromiseOptions) => Promise<T>
+  }
+}
+const ToastContext = createContext<ToastContextType | null>(null)
+const toastIcons = {
+  default: null,
+  success: CheckCircle,
+  warning: AlertTriangle,
+  error: XCircle,
+  info: Info,
+  loading: Loader2,
+}
+
+const motionVariants = {
+  'top-right': {
+    initial: { x: 400, opacity: 0, scale: 0.8 },
+    animate: { x: 0, opacity: 1, scale: 1 },
+    exit: { x: 400, opacity: 0, scale: 0.8 }
+  },
+  'top-center': {
+    initial: { y: -100, opacity: 0, scale: 0.8 },
+    animate: { y: 0, opacity: 1, scale: 1 },
+    exit: { y: -100, opacity: 0, scale: 0.8 }
+  },
+  'top-left': {
+    initial: { x: -400, opacity: 0, scale: 0.8 },
+    animate: { x: 0, opacity: 1, scale: 1 },
+    exit: { x: -400, opacity: 0, scale: 0.8 }
+  },
+  'bottom-right': {
+    initial: { x: 400, opacity: 0, scale: 0.8 },
+    animate: { x: 0, opacity: 1, scale: 1 },
+    exit: { x: 400, opacity: 0, scale: 0.8 }
+  },
+  'bottom-center': {
+    initial: { y: 100, opacity: 0, scale: 0.8 },
+    animate: { y: 0, opacity: 1, scale: 1 },
+    exit: { y: 100, opacity: 0, scale: 0.8 }
+  },
+  'bottom-left': {
+    initial: { x: -400, opacity: 0, scale: 0.8 },
+    animate: { x: 0, opacity: 1, scale: 1 },
+    exit: { x: -400, opacity: 0, scale: 0.8 }
+  }
+}
+export const styleConfigs = {
+  simple: {
+    default: {
+      container: 'bg-background border border-border text-foreground p-3',
+      icon: 'text-muted-foreground',
+      title: 'text-foreground',
+      description: 'text-muted-foreground',
+      button: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      dismissButton: 'text-muted-foreground hover:text-foreground',
+    },
+    success: {
+      container: "bg-green-950/50 border border-green-800/50 text-green-100 p-3",
+      icon: "text-green-400",
+      title: "text-green-100",
+      description: "text-green-200",
+      button: "bg-green-600 text-white hover:bg-green-700",
+      dismissButton: "text-green-400 hover:text-green-200"
+    },
+    warning: {
+      container: "bg-orange-950/50 border border-orange-800/50 text-orange-100 p-3",
+      icon: "text-orange-400",
+      title: "text-orange-100",
+      description: "text-orange-200",
+      button: "bg-orange-600 text-white hover:bg-orange-700",
+      dismissButton: "text-orange-400 hover:text-orange-200"
+    },
+    error: {
+      container: "bg-red-950/50 border border-red-800/50 text-red-100 p-3",
+      icon: "text-red-400",
+      title: "text-red-100",
+      description: "text-red-200",
+      button: "bg-red-600 text-white hover:bg-red-700",
+      dismissButton: "text-red-400 hover:text-red-200"
+    },
+    info: {
+      container: "bg-blue-950/50 border border-blue-800/50 text-blue-100 p-3",
+      icon: "text-blue-400",
+      title: "text-blue-100",
+      description: "text-blue-200",
+      button: "bg-blue-600 text-white hover:bg-blue-700",
+      dismissButton: "text-blue-400 hover:text-blue-200"
+    },
+    loading: {
+      container: "bg-background border border-border text-foreground p-3",
+      icon: "text-muted-foreground animate-spin",
+      title: "text-foreground",
+      description: "text-muted-foreground",
+      button: "bg-primary text-primary-foreground hover:bg-primary/90",
+      dismissButton: "text-muted-foreground hover:text-foreground"
+    }
+  },
+  bordered: {
+    default: {
+      container: 'bg-background border-2 border-border text-foreground shadow-sm p-3',
+      icon: 'text-primary',
+      title: 'text-foreground font-medium',
+      description: 'text-muted-foreground',
+      button: 'bg-primary text-primary-foreground hover:bg-primary/90 border-0',
+      dismissButton: 'text-muted-foreground hover:text-foreground border border-border hover:bg-muted',
+    },
+    success: {
+      container: "bg-green-950/20 border-2 border-green-500 text-green-100 shadow-md p-3",
+      icon: "text-green-400",
+      title: "text-green-100 font-semibold",
+      description: "text-green-200",
+      button: "bg-green-600 text-white hover:bg-green-700 border-0",
+      dismissButton: "text-green-400 hover:text-green-200 border border-green-500 hover:bg-green-950/40"
+    },
+    warning: {
+      container: "bg-amber-950/20 border-2 border-amber-500 text-amber-100 shadow-md p-3",
+      icon: "text-amber-400",
+      title: "text-amber-100 font-semibold",
+      description: "text-amber-200",
+      button: "bg-amber-600 text-white hover:bg-amber-700 border-0",
+      dismissButton: "text-amber-400 hover:text-amber-200 border border-amber-500 hover:bg-amber-950/40"
+    },
+    error: {
+      container: "bg-rose-950/20 border-2 border-rose-500 text-rose-100 shadow-md p-3",
+      icon: "text-rose-400",
+      title: "text-rose-100 font-semibold",
+      description: "text-rose-200",
+      button: "bg-rose-600 text-white hover:bg-rose-700 border-0",
+      dismissButton: "text-rose-400 hover:text-rose-200 border border-rose-500 hover:bg-rose-950/40"
+    },
+    info: {
+      container: "bg-cyan-950/20 border-2 border-cyan-500 text-cyan-100 shadow-md p-3",
+      icon: "text-cyan-400",
+      title: "text-cyan-100 font-semibold",
+      description: "text-cyan-200",
+      button: "bg-cyan-600 text-white hover:bg-cyan-700 border-0",
+      dismissButton: "text-cyan-400 hover:text-cyan-200 border border-cyan-500 hover:bg-cyan-950/40"
+    },
+    loading: {
+      container: "bg-background border-2 border-border text-foreground shadow-sm p-3",
+      icon: "text-primary animate-spin",
+      title: "text-foreground font-medium",
+      description: "text-muted-foreground",
+      button: "bg-primary text-primary-foreground hover:bg-primary/90 border-0",
+      dismissButton: "text-muted-foreground hover:text-foreground border border-border hover:bg-muted"
+    }
+  },
+  filled: {
+    default: {
+      container: 'bg-muted text-muted-foreground border-0 p-3',
+      icon: 'text-foreground',
+      title: 'text-foreground font-medium',
+      description: 'text-muted-foreground',
+      button: 'bg-background text-foreground hover:bg-background/80',
+      dismissButton: 'text-muted-foreground hover:text-foreground',
+    },
+    success: {
+      container: "bg-green-600 text-green-50 border-0 p-3",
+      icon: "text-green-100",
+      title: "text-green-50 font-medium",
+      description: "text-green-100",
+      button: "bg-green-800 text-green-50 hover:bg-green-900",
+      dismissButton: "text-green-200 hover:text-green-50"
+    },
+    warning: {
+      container: "bg-amber-600 text-amber-50 border-0 p-3",
+      icon: "text-amber-100",
+      title: "text-amber-50 font-medium",
+      description: "text-amber-100",
+      button: "bg-amber-800 text-amber-50 hover:bg-amber-900",
+      dismissButton: "text-amber-200 hover:text-amber-50"
+    },
+    error: {
+      container: "bg-red-600 text-red-50 border-0 p-3",
+      icon: "text-red-100",
+      title: "text-red-50 font-medium",
+      description: "text-red-100",
+      button: "bg-red-800 text-red-50 hover:bg-red-900",
+      dismissButton: "text-red-200 hover:text-red-50"
+    },
+    info: {
+      container: "bg-blue-600 text-blue-50 border-0 p-3",
+      icon: "text-blue-100",
+      title: "text-blue-50 font-medium",
+      description: "text-blue-100",
+      button: "bg-blue-800 text-blue-50 hover:bg-blue-900",
+      dismissButton: "text-blue-200 hover:text-blue-50"
+    },
+    loading: {
+      container: "bg-muted text-muted-foreground border-0 p-3",
+      icon: "text-foreground animate-spin",
+      title: "text-foreground font-medium",
+      description: "text-muted-foreground",
+      button: "bg-background text-foreground hover:bg-background/80",
+      dismissButton: "text-muted-foreground hover:text-foreground"
+    }
+  },
+  accent: {
+    default: {
+      container: 'bg-background border-l-4 border-primary text-foreground shadow-sm pl-4 p-3',
+      icon: 'text-primary',
+      title: 'text-foreground font-medium',
+      description: 'text-muted-foreground',
+      button: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      dismissButton: 'text-muted-foreground hover:text-foreground',
+    },
+    success: {
+      container: "bg-green-950/30 border-l-4 border-green-400 text-green-100 shadow-sm pl-4 p-3",
+      icon: "text-green-400",
+      title: "text-green-100 font-semibold",
+      description: "text-green-200",
+      button: "bg-green-600 text-white hover:bg-green-700",
+      dismissButton: "text-green-400 hover:text-green-200"
+    },
+    warning: {
+      container: "bg-yellow-950/30 border-l-4 border-yellow-400 text-yellow-100 shadow-sm pl-4 p-3",
+      icon: "text-yellow-400",
+      title: "text-yellow-100 font-semibold",
+      description: "text-yellow-200",
+      button: "bg-yellow-600 text-white hover:bg-yellow-700",
+      dismissButton: "text-yellow-400 hover:text-yellow-200"
+    },
+    error: {
+      container: "bg-red-950/30 border-l-4 border-red-400 text-red-100 shadow-sm pl-4 p-3",
+      icon: "text-red-400",
+      title: "text-red-100 font-semibold",
+      description: "text-red-200",
+      button: "bg-red-600 text-white hover:bg-red-700",
+      dismissButton: "text-red-400 hover:text-red-200"
+    },
+    info: {
+      container: "bg-indigo-950/30 border-l-4 border-indigo-400 text-indigo-100 shadow-sm pl-4 p-3",
+      icon: "text-indigo-400",
+      title: "text-indigo-100 font-semibold",
+      description: "text-indigo-200",
+      button: "bg-indigo-600 text-white hover:bg-indigo-700",
+      dismissButton: "text-indigo-400 hover:text-indigo-200"
+    },
+    loading: {
+      container: "bg-background border-l-4 border-primary text-foreground shadow-sm pl-4 p-3",
+      icon: "text-primary animate-spin",
+      title: "text-foreground font-medium",
+      description: "text-muted-foreground",
+      button: "bg-primary text-primary-foreground hover:bg-primary/90",
+      dismissButton: "text-muted-foreground hover:text-foreground"
+    }
+  },
+  banner: {
+    default: {
+      container: 'bg-muted text-foreground border-0 rounded-lg px-4 py-3 p-3',
+      icon: 'text-primary',
+      title: 'text-foreground font-semibold',
+      description: 'text-muted-foreground',
+      button: 'bg-background text-foreground hover:bg-background/80 rounded-md',
+      dismissButton: 'text-muted-foreground hover:text-foreground',
+    },
+    success: {
+      container: "bg-green-700 text-green-50 border-0 rounded-lg px-4 py-3 p-3",
+      icon: "text-green-100",
+      title: "text-green-50 font-bold",
+      description: "text-green-100",
+      button: "bg-green-900 text-green-50 hover:bg-green-950 rounded-md",
+      dismissButton: "text-green-200 hover:text-green-50"
+    },
+    warning: {
+      container: "bg-orange-700 text-orange-50 border-0 rounded-lg px-4 py-3 p-3",
+      icon: "text-orange-100",
+      title: "text-orange-50 font-bold",
+      description: "text-orange-100",
+      button: "bg-orange-900 text-orange-50 hover:bg-orange-950 rounded-md",
+      dismissButton: "text-orange-200 hover:text-orange-50"
+    },
+    error: {
+      container: "bg-red-700 text-red-50 border-0 rounded-lg px-4 py-3 p-3",
+      icon: "text-red-100",
+      title: "text-red-50 font-bold",
+      description: "text-red-100",
+      button: "bg-red-900 text-red-50 hover:bg-red-950 rounded-md ",
+      dismissButton: "text-red-200 hover:text-red-50"
+    },
+    info: {
+      container: "bg-blue-700 text-blue-50 border-0 rounded-lg px-4 py-3 p-3",
+      icon: "text-blue-100",
+      title: "text-blue-50 font-bold",
+      description: "text-blue-100",
+      button: "bg-blue-900 text-blue-50 hover:bg-blue-950 rounded-md",
+      dismissButton: "text-blue-200 hover:text-blue-50"
+    },
+    loading: {
+      container: "bg-muted text-foreground border-0 rounded-lg px-4 py-3 p-3",
+      icon: "text-primary animate-spin",
+      title: "text-foreground font-semibold",
+      description: "text-muted-foreground",
+      button: "bg-background text-foreground hover:bg-background/80 rounded-md",
+      dismissButton: "text-muted-foreground hover:text-foreground"
+    }
+  },
+  card: {
+    default: {
+      container: 'bg-card border border-border text-card-foreground shadow-lg rounded-lg p-3',
+      icon: 'text-primary',
+      title: 'text-card-foreground font-semibold',
+      description: 'text-muted-foreground',
+      button: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      dismissButton: 'text-muted-foreground hover:text-foreground',
+    },
+    success: {
+      container: "bg-green-900/50 border border-green-700 text-green-100 shadow-xl rounded-lg p-4 backdrop-blur-sm",
+      icon: "text-green-400",
+      title: "text-green-100 font-bold",
+      description: "text-green-200",
+      button: "bg-green-600 text-white hover:bg-green-700 shadow-sm",
+      dismissButton: "text-green-400 hover:text-green-200 hover:bg-green-800/50 rounded-full"
+    },
+    warning: {
+      container: "bg-amber-900/50 border border-amber-700 text-amber-100 shadow-xl rounded-lg p-4 backdrop-blur-sm",
+      icon: "text-amber-400",
+      title: "text-amber-100 font-bold",
+      description: "text-amber-200",
+      button: "bg-amber-600 text-white hover:bg-amber-700 shadow-sm",
+      dismissButton: "text-amber-400 hover:text-amber-200 hover:bg-amber-800/50 rounded-full"
+    },
+    error: {
+      container: "bg-red-900/50 border border-red-700 text-red-100 shadow-xl rounded-lg p-4 backdrop-blur-sm",
+      icon: "text-red-400",
+      title: "text-red-100 font-bold",
+      description: "text-red-200",
+      button: "bg-red-600 text-white hover:bg-red-700 shadow-sm",
+      dismissButton: "text-red-400 hover:text-red-200 hover:bg-red-800/50 rounded-full"
+    },
+    info: {
+      container: "bg-blue-900/50 border border-blue-700 text-blue-100 shadow-xl rounded-lg p-4 backdrop-blur-sm",
+      icon: "text-blue-400",
+      title: "text-blue-100 font-bold",
+      description: "text-blue-200",
+      button: "bg-blue-600 text-white hover:bg-blue-700 shadow-sm",
+      dismissButton: "text-blue-400 hover:text-blue-200 hover:bg-blue-800/50 rounded-full"
+    },
+    loading: {
+      container: "bg-card border border-border text-card-foreground shadow-lg rounded-lg p-3",
+      icon: "text-primary animate-spin",
+      title: "text-card-foreground font-semibold",
+      description: "text-muted-foreground",
+      button: "bg-primary text-primary-foreground hover:bg-primary/90",
+      dismissButton: "text-muted-foreground hover:text-foreground"
+    }
+  },
+  minimal: {
+    default: {
+      container: 'bg-transparent border-0 text-foreground p-3',
+      icon: 'text-muted-foreground',
+      title: 'text-foreground',
+      description: 'text-muted-foreground text-sm',
+      button: 'text-primary hover:text-primary/80 underline bg-transparent p-0',
+      dismissButton: 'text-muted-foreground hover:text-foreground bg-transparent',
+    },
+    success: {
+      container: "bg-transparent border-0 text-green-200 p-3",
+      icon: "text-green-400",
+      title: "text-green-200 font-medium",
+      description: "text-green-300 text-sm",
+      button: "text-green-400 hover:text-green-200 underline bg-transparent p-0",
+      dismissButton: "text-green-500 hover:text-green-300 bg-transparent"
+    },
+    warning: {
+      container: "bg-transparent border-0 text-amber-200 p-3",
+      icon: "text-amber-400",
+      title: "text-amber-200 font-medium",
+      description: "text-amber-300 text-sm",
+      button: "text-amber-400 hover:text-amber-200 underline bg-transparent p-0",
+      dismissButton: "text-amber-500 hover:text-amber-300 bg-transparent"
+    },
+    error: {
+      container: "bg-transparent border-0 text-red-200 p-3",
+      icon: "text-red-400",
+      title: "text-red-200 font-medium",
+      description: "text-red-300 text-sm",
+      button: "text-red-400 hover:text-red-200 underline bg-transparent p-0",
+      dismissButton: "text-red-500 hover:text-red-300 bg-transparent"
+    },
+    info: {
+      container: "bg-transparent border-0 text-blue-200 p-3",
+      icon: "text-blue-400",
+      title: "text-blue-200 font-medium",
+      description: "text-blue-300 text-sm",
+      button: "text-blue-400 hover:text-blue-200 underline bg-transparent p-0",
+      dismissButton: "text-blue-500 hover:text-blue-300 bg-transparent"
+    },
+    loading: {
+      container: "bg-transparent border-0 text-foreground p-3",
+      icon: "text-muted-foreground animate-spin",
+      title: "text-foreground",
+      description: "text-muted-foreground text-sm",
+      button: "text-primary hover:text-primary/80 underline bg-transparent p-0",
+      dismissButton: "text-muted-foreground hover:text-foreground bg-transparent"
+    }
+
+  },
+  soft: {
+    default: {
+      container: 'bg-primary/10 border border-primary/20 text-foreground p-3',
+      icon: 'text-primary',
+      title: 'text-foreground font-medium',
+      description: 'text-muted-foreground',
+      button: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      dismissButton: 'text-muted-foreground hover:text-foreground',
+    },
+    success: {
+      container: "bg-green-500/10 border border-green-500/20 text-green-100 p-3",
+      icon: "text-green-400",
+      title: "text-green-100 font-medium",
+      description: "text-green-200",
+      button: "bg-green-600 text-white hover:bg-green-700",
+      dismissButton: "text-green-400 hover:text-green-200"
+    },
+    warning: {
+      container: "bg-amber-500/10 border border-amber-500/20 text-amber-100 p-3",
+      icon: "text-amber-400",
+      title: "text-amber-100 font-medium",
+      description: "text-amber-200",
+      button: "bg-amber-600 text-white hover:bg-amber-700",
+      dismissButton: "text-amber-400 hover:text-amber-200"
+    },
+    error: {
+      container: "bg-red-500/10 border border-red-500/20 text-red-100 p-3",
+      icon: "text-red-400",
+      title: "text-red-100 font-medium",
+      description: "text-red-200",
+      button: "bg-red-600 text-white hover:bg-red-700",
+      dismissButton: "text-red-400 hover:text-red-200"
+    },
+    info: {
+      container: "bg-blue-500/10 border border-blue-500/20 text-blue-100 p-3",
+      icon: "text-blue-400",
+      title: "text-blue-100 font-medium",
+      description: "text-blue-200",
+      button: "bg-blue-600 text-white hover:bg-blue-700",
+      dismissButton: "text-blue-400 hover:text-blue-200"
+    },
+    loading: {
+      container: "bg-primary/10 border border-primary/20 text-foreground p-3",
+      icon: "text-primary animate-spin",
+      title: "text-foreground font-medium",
+      description: "text-muted-foreground",
+      button: "bg-primary text-primary-foreground hover:bg-primary/90",
+      dismissButton: "text-muted-foreground hover:text-foreground"
+    }
+  }
+}
+const animationVariants = {
+  'top-right': {
+    enter: 'animate-in slide-in-from-right-full fade-in-0 duration-300',
+    exit: 'animate-out slide-out-to-right-full fade-out-0 duration-200'
+  },
+  'top-center': {
+    enter: 'animate-in slide-in-from-top-2 fade-in-0 duration-300',
+    exit: 'animate-out slide-out-to-top-2 fade-out-0 duration-200'
+  },
+  'top-left': {
+    enter: 'animate-in slide-in-from-left-full fade-in-0 duration-300',
+    exit: 'animate-out slide-out-to-left-full fade-out-0 duration-200'
+  },
+  'bottom-right': {
+    enter: 'animate-in slide-in-from-right-full fade-in-0 duration-300',
+    exit: 'animate-out slide-out-to-right-full fade-out-0 duration-200'
+  },
+  'bottom-center': {
+    enter: 'animate-in slide-in-from-bottom-2 fade-in-0 duration-300',
+    exit: 'animate-out slide-out-to-bottom-2 fade-out-0 duration-200'
+  },
+  'bottom-left': {
+    enter: 'animate-in slide-in-from-left-full fade-in-0 duration-300',
+    exit: 'animate-out slide-out-to-left-full fade-out-0 duration-200'
+  }
+}
+const ToastComponent: React.FC<{
+  toast: Toast
+  onDismiss: () => void
+  position: string
+  stackCount?: number,
+    animated?: boolean
+}> = ({ toast, onDismiss, position, stackCount, animated = false  }) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isPaused, setIsPaused] = useState(false)
+  const [isExiting, setIsExiting] = useState(false)
+  const [dragX, setDragX] = useState(0)
+  const startX = useRef(0)
+  const timerRef = useRef<NodeJS.Timeout>()
+
+  const variant = toast.variant || 'simple'
+  const styles = styleConfigs[variant]?.[toast.type] || styleConfigs.simple[toast.type]
+  const IconComponent = toast.icon ? null : toastIcons[toast.type]
+  const animations = animationVariants[position] || animationVariants['top-center']
+  const motionAnim = motionVariants[position] || motionVariants['top-center']
+  // Auto-dismiss timer with pause support
+  useEffect(() => {
+    if (toast.duration === 0 || toast.type === 'loading' || isPaused) {
+      return
+    }
+
+    timerRef.current = setTimeout(() => {
+      handleDismiss()
+    }, toast.duration || 4000)
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [toast.duration, isPaused, toast.type])
+
+  const handleDismiss = () => {
+    setIsExiting(true)
+    setTimeout(() => {
+      onDismiss()
+    }, 200)
+  }
+
+  // Touch/Mouse drag handlers
+  const handleDragStart = (clientX: number) => {
+    startX.current = clientX
+    setIsPaused(true)
+  }
+
+  const handleDragMove = (clientX: number) => {
+    const diff = clientX - startX.current
+    if (Math.abs(diff) > 10) {
+      setDragX(diff)
+    }
+  }
+
+  const handleDragEnd = () => {
+    if (Math.abs(dragX) > 100) {
+      handleDismiss()
+    } else {
+      setDragX(0)
+      setIsPaused(false)
+    }
+  }
+
+  const hasLongContent = () => {
+    const titleLength = typeof toast.title === 'string' ? toast.title.length : 50
+    const descLength = typeof toast.description === 'string' ? toast.description.length : 50
+    return titleLength + descLength > toast.collapseThreshold || 150
+  }
+
+  const shouldCollapse = hasLongContent() && !isExpanded
+ const ToastWrapper = animated ? motion.div : 'div'
+  const wrapperProps = animated ? {
+    initial: motionAnim.initial,
+    animate: motionAnim.animate,
+    exit: motionAnim.exit,
+    transition: { type: 'spring', damping: 25, stiffness: 300 }
+  } : {}
+
+  return (
+     <ToastWrapper
+      {...wrapperProps}
+      className={cn(
+        "relative flex items-start gap-3 rounded-lg shadow-lg backdrop-blur-sm cursor-pointer select-none touch-pan-y",
+        styles.container,
+        isExiting ? animations.exit : animations.enter,
+        stackCount && stackCount > 1 && "mb-1"
+      )}
+      style={{
+        transform: `translateX(${dragX}px)`,
+        opacity: Math.max(0.5, 1 - Math.abs(dragX) / 200),
+        transition: dragX === 0 ? 'transform 0.2s, opacity 0.2s' : 'none'
+      }}
+      onMouseEnter={() => setIsPaused(true)}
+      onMouseLeave={() => setIsPaused(false)}
+      onClick={() => hasLongContent() && setIsExpanded(!isExpanded)}
+      onMouseDown={(e) => handleDragStart(e.clientX)}
+      onMouseMove={(e) => dragX !== 0 && handleDragMove(e.clientX)}
+      onMouseUp={handleDragEnd}
+      onTouchStart={(e) => handleDragStart(e.touches[0].clientX)}
+      onTouchMove={(e) => handleDragMove(e.touches[0].clientX)}
+      onTouchEnd={handleDragEnd}
+    >
+      {toast.icon ? (
+        <div className={`w-5 h-5 mt-0.5 flex-shrink-0 ${styles.icon}`}>
+          {toast.icon}
+        </div>
+      ) : IconComponent ? (
+        <IconComponent className={`w-5 h-5 mt-0.5 flex-shrink-0 ${styles.icon}`} />
+      ) : null}
+
+      <div className="flex-1 min-w-0">
+        <div className={`font-semibold text-sm ${styles.title}`}>
+          {toast.title}
+        </div>
+        {toast.description && (
+          <div className={cn(
+            `text-sm mt-1 ${styles.description}`,
+            shouldCollapse && "line-clamp-2"
+          )}>
+            {toast.description}
+          </div>
+        )}
+
+        {toast.action && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              toast.action.onClick()
+            }}
+            className={`mt-2 px-3 py-1.5 text-xs rounded-md transition-colors ${styles.button}`}
+          >
+            {toast.action.label}
+          </button>
+        )}
+
+        {hasLongContent() && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              setIsExpanded(!isExpanded)
+            }}
+            className="text-xs mt-1 opacity-70 hover:opacity-100"
+          >
+            {isExpanded ? 'Show less' : 'Show more'}
+          </button>
+        )}
+      </div>
+
+      {stackCount && stackCount > 1 && (
+        <div className={`absolute -bottom-2 left-2 right-2 h-1 rounded-b-lg opacity-50 ${styles.container}`} />
+      )}
+
+      {toast.dismissible !== false && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            handleDismiss()
+          }}
+          className={`p-1 rounded-md transition-colors flex-shrink-0 ${styles.dismissButton}`}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </ToastWrapper>
+  )
+}
+const ToastContainer: React.FC<{
+  position: string
+  toasts: Toast[]
+  onRemove: (id: string) => void
+   animated?: boolean
+}> = ({ position, toasts, onRemove, animated = false }) => {
+  if (toasts.length === 0) return null
+
+  // Group toasts by type
+  const groupedToasts = toasts.reduce((acc, toast) => {
+    const key = `${toast.type}-${typeof toast.title === 'string' ? toast.title : 'custom'}`
+    if (!acc[key]) {
+      acc[key] = []
+    }
+    acc[key].push(toast)
+    return acc
+  }, {} as Record<string, Toast[]>)
+
+  // Create display toasts with stack counts
+  const displayToasts = Object.values(groupedToasts).map(group => {
+    const latest = group[group.length - 1]
+    return {
+      toast: latest,
+      count: group.length
+    }
+  })
+  const ContainerWrapper = animated ? AnimatePresence : React.Fragment
+  const containerProps = animated ? { mode: 'popLayout' as const } : {}
+  return (
+    <div className={cn(
+      "fixed z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none",
+      position === "top-right" ? "top-4 right-4" :
+        position === "top-center" ? "top-4 left-1/2 -translate-x-1/2" :
+          position === "top-left" ? "top-4 left-4" :
+            position === "bottom-right" ? "bottom-4 right-4" :
+              position === "bottom-center" ? "bottom-4 left-1/2 -translate-x-1/2" :
+                position === "bottom-left" ? "bottom-4 left-4" :
+                  "top-4 left-1/2 -translate-x-1/2"
+    )}>
+        <ContainerWrapper {...containerProps}>
+      {displayToasts.map(({ toast, count }) => (
+        <div key={toast.id} className="pointer-events-auto">
+          <ToastComponent
+            toast={toast}
+            onDismiss={() => onRemove(toast.id)}
+            position={position}
+            stackCount={count}
+          />
+        </div>
+      ))}
+      </ContainerWrapper>
+    </div>
+  )
+}
+export function Toasty({
+  position = 'top-center',
+  limit = 3,
+   animated = false,
+  children,
+}: {
+  position?: 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left'
+  limit?: number
+    animated?: boolean
+  children: React.ReactNode
+}) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+  const [queue, setQueue] = useState<Toast[]>([])
+
+  // Process queue when toasts are dismissed
+  useEffect(() => {
+    if (toasts.length < limit && queue.length > 0) {
+      const [nextToast, ...remainingQueue] = queue
+      setToasts(prev => [...prev, nextToast])
+      setQueue(remainingQueue)
+    }
+  }, [toasts.length, queue.length, limit])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && toasts.length > 0) {
+        const lastToast = toasts[toasts.length - 1]
+        if (lastToast.dismissible !== false) {
+          removeToast(lastToast.id)
+        }
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [toasts])
+
+  const addToast = useCallback((toast: Omit<Toast, 'id'>): string => {
+    const id = Date.now().toString() + Math.random().toString(36).substr(2, 9)
+    const newToast = { ...toast, id }
+
+    setToasts((prev) => {
+      if (prev.length >= limit) {
+        setQueue(q => [...q, newToast])
+        return prev
+      }
+      return [...prev, newToast]
+    })
+
+    return id
+  }, [limit])
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id))
+  }, [])
+
+  const updateToast = useCallback((id: string, updates: Partial<Toast>) => {
+    setToasts((prev) =>
+      prev.map((toast) =>
+        toast.id === id ? { ...toast, ...updates } : toast
+      )
+    )
+  }, [])
+
+  const toastMethods = {
+    success: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) =>
+      addToast({ type: 'success', title, description, ...options }),
+    warning: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) =>
+      addToast({ type: 'warning', title, description, ...options }),
+    error: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) =>
+      addToast({ type: 'error', title, description, ...options }),
+    info: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) =>
+      addToast({ type: 'info', title, description, ...options }),
+    loading: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) =>
+      addToast({ type: 'loading', title, description, duration: 0, dismissible: false, ...options }),
+    default: (title: string | React.ReactNode, description?: string | React.ReactNode, options?: Partial<Toast>) =>
+      addToast({ type: 'default', title, description, ...options }),
+    promise: async <T,>(promise: Promise<T>, options: PromiseOptions): Promise<T> => {
+      const id = addToast({
+        type: 'loading',
+        title: options.loading,
+        description: options.description,
+        duration: 0,
+        dismissible: false,
+        variant: options.variant
+      })
+
+      try {
+        const result = await promise
+        const successTitle = typeof options.success === 'function'
+          ? options.success(result)
+          : options.success
+
+        updateToast(id, {
+          type: 'success',
+          title: successTitle,
+          duration: options.duration || 4000,
+          dismissible: true
+        })
+
+        return result
+      } catch (error) {
+        const errorTitle = typeof options.error === 'function'
+          ? options.error(error)
+          : options.error
+
+        updateToast(id, {
+          type: 'error',
+          title: errorTitle,
+          duration: options.duration || 4000,
+          dismissible: true
+        })
+
+        throw error
+      }
+    }
+  }
+
+  const contextValue: ToastContextType = {
+    toasts,
+    addToast,
+    removeToast,
+    updateToast,
+    toast: toastMethods,
+  }
+
+  // Group toasts by position
+  const toastsByPosition = toasts.reduce((acc, toast) => {
+    const pos = toast.position || position
+    if (!acc[pos]) acc[pos] = []
+    acc[pos].push(toast)
+    return acc
+  }, {} as Record<string, Toast[]>)
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      {Object.entries(toastsByPosition).map(([pos, posToasts]) => (
+        <ToastContainer
+          key={pos}
+          position={pos}
+          toasts={posToasts}
+          onRemove={removeToast}
+           animated={animated}
+        />
+      ))}
+    </ToastContext.Provider>
+  )
+}
+export function useToasted() {
+  const context = useContext(ToastContext)
+
+  if (!context) {
+    throw new Error('useToasted must be used within a Toasty')
+  }
+
+  return context
+}
+export function ToastDemo() {
+  const { toast, updateToast } = useToasted()
+  const [promiseStatus, setPromiseStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
+
+  // Mock async function
+  const fetchData = () => {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        Math.random() > 0.5 ? resolve({ data: 'Success!' }) : reject(new Error('Failed to fetch'))
+      }, 2000)
+    })
+  }
+
+  return (
+    <div className="space-y-8 p-6 max-w-4xl mx-auto">
+      {/* Basic Toasts */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Basic Toasts</h3>
+        <div className="flex flex-col gap-2">
+          <Button variant='outline' onClick={() => toast.success('Success!', 'Your action was completed successfully.')}>
+            Success Toast
+          </Button>
+          <Button variant='outline'  onClick={() => toast.error('Error!', 'Something went wrong.')}>
+            Error Toast
+          </Button>
+          <Button variant='outline'  onClick={() => toast.warning('Warning!', 'Please check your input.')}>
+            Warning Toast
+          </Button>
+          <Button variant='outline'  onClick={() => toast.info('Info', 'Here is some information.')}>
+            Info Toast
+          </Button>
+          <Button variant='outline'  onClick={() => toast.default('Default', 'This is a default toast.')}>
+            Default Toast
+          </Button>
+        </div>
+      </div>
+
+      {/* Variants */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Style Variants</h3>
+        <div className="flex flex-wrap gap-2">
+          <Button variant='outline'  onClick={() => toast.success('Simple', 'Simple variant', { variant: 'simple' })}>
+            Simple
+          </Button>
+          <Button variant='outline'  onClick={() => toast.success('Bordered', 'Bordered variant', { variant: 'bordered' })}>
+            Bordered
+          </Button>
+          <Button variant='outline'  onClick={() => toast.success('Filled', 'Filled variant', { variant: 'filled' })}>
+            Filled
+          </Button>
+          <Button variant='outline'  onClick={() => toast.success('Accent', 'Accent variant', { variant: 'accent' })}>
+            Accent
+          </Button>
+          <Button variant='outline'  onClick={() => toast.success('Banner', 'Banner variant', { variant: 'banner' })}>
+            Banner
+          </Button>
+          <Button variant='outline'  onClick={() => toast.success('Card', 'Card variant', { variant: 'card' })}>
+            Card
+          </Button>
+          <Button variant='outline'  onClick={() => toast.success('Minimal', 'Minimal variant', { variant: 'minimal' })}>
+            Minimal
+          </Button>
+          <Button variant='outline'  onClick={() => toast.success('Soft', 'Soft variant', { variant: 'soft' })}>
+            Soft
+          </Button>
+        </div>
+      </div>
+
+      {/* Toast Update by ID */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Update Toast by ID</h3>
+        <Button variant='outline' 
+          onClick={() => {
+            const id = toast.loading('Processing...', 'Please wait while we process your request.')
+            setTimeout(() => {
+              updateToast(id, {
+                type: 'success',
+                title: 'Complete!',
+                description: 'Your request was processed successfully.',
+                duration: 4000,
+                dismissible: true
+              })
+            }, 2000)
+          }}
+        >
+          Loading → Success
+        </Button>
+      </div>
+
+      {/* Promise Toast */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Promise Toast</h3>
+        <div className="flex gap-2">
+          <Button variant='outline' 
+            onClick={() => {
+              setPromiseStatus('loading')
+              toast.promise(
+                fetchData(),
+                {
+                  loading: 'Fetching data...',
+                  success: 'Data fetched successfully!',
+                  error: (err) => `Error: ${err.message}`
+                }
+              )
+                .then(() => setPromiseStatus('success'))
+                .catch(() => setPromiseStatus('error'))
+            }}
+            disabled={promiseStatus === 'loading'}
+          >
+            Promise Toast (Random)
+          </Button>
+          <Button variant='outline' 
+            variant="outline"
+            onClick={() => {
+              toast.promise(
+                new Promise((resolve) => setTimeout(() => resolve({ user: 'John' }), 1500)),
+                {
+                  loading: 'Loading user...',
+                  success: (data) => `Welcome ${data.user}!`,
+                  error: 'Failed to load user',
+                  variant: 'card'
+                }
+              )
+            }}
+          >
+            Promise with Data
+          </Button>
+        </div>
+      </div>
+
+      {/* With Actions */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">With Actions</h3>
+        <Button variant='outline' 
+          onClick={() =>
+            toast.success('File uploaded', 'Your file has been uploaded successfully.', {
+              action: {
+                label: 'View',
+                onClick: () => console.log('View clicked')
+              }
+            })
+          }
+        >
+          Toast with Action
+        </Button>
+      </div>
+
+      {/* Custom Icons */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Custom Icons</h3>
+        <div className="flex gap-2">
+          <Button variant='outline' 
+            onClick={() =>
+              toast.success('Saved!', 'Your changes have been saved.', {
+                icon: <CheckCircle className="w-5 h-5 text-green-400" />
+              })
+            }
+          >
+            Custom Success Icon
+          </Button>
+          <Button variant='outline' 
+            onClick={() =>
+              toast.info('Notification', 'You have a new message.', {
+                icon: <Bell className="w-5 h-5 text-blue-400" />
+              })
+            }
+          >
+            Bell Icon
+          </Button>
+        </div>
+      </div>
+
+      {/* Per-Toast Positioning */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Custom Positions</h3>
+        <div className="flex flex-wrap gap-2">
+          <Button variant='outline'  onClick={() => toast.info('Top Right', '', { position: 'top-right' })}>
+            Top Right
+          </Button>
+          <Button variant='outline'  onClick={() => toast.info('Top Center', '', { position: 'top-center' })}>
+            Top Center
+          </Button>
+          <Button variant='outline'  onClick={() => toast.info('Top Left', '', { position: 'top-left' })}>
+            Top Left
+          </Button>
+          <Button variant='outline'  onClick={() => toast.info('Bottom Right', '', { position: 'bottom-right' })}>
+            Bottom Right
+          </Button>
+          <Button variant='outline'  onClick={() => toast.info('Bottom Center', '', { position: 'bottom-center' })}>
+            Bottom Center
+          </Button>
+          <Button variant='outline'  onClick={() => toast.info('Bottom Left', '', { position: 'bottom-left' })}>
+            Bottom Left
+          </Button>
+        </div>
+      </div>
+
+      {/* Long Content (Expandable) */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Expandable Content</h3>
+        <Button variant='outline' 
+          onClick={() =>
+            toast.info(
+              'Long Title That Might Need Expansion',
+              'This is a very long description that contains a lot of information. The user might need to expand this to read the full content. It demonstrates the expand/collapse feature that shows a preview and allows expanding on hover or click to see the complete message.',
+              { collapseThreshold: 100 }
+            )
+          }
+        >
+          Long Content Toast
+        </Button>
+      </div>
+
+      {/* Custom Duration */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Custom Duration</h3>
+        <div className="flex gap-2">
+          <Button variant='outline'  onClick={() => toast.info('Quick', 'Dismisses in 1 second', { duration: 1000 })}>
+            1 Second
+          </Button>
+          <Button variant='outline'  onClick={() => toast.info('Normal', 'Dismisses in 4 seconds', { duration: 4000 })}>
+            4 Seconds
+          </Button>
+          <Button variant='outline'  onClick={() => toast.info('Long', 'Dismisses in 10 seconds', { duration: 10000 })}>
+            10 Seconds
+          </Button>
+          <Button variant='outline'  onClick={() => toast.info('Persistent', 'Must be dismissed manually', { duration: 0 })}>
+            No Auto-Dismiss
+          </Button>
+        </div>
+      </div>
+
+      {/* Non-Dismissible */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Non-Dismissible</h3>
+        <Button variant='outline' 
+          onClick={() => {
+            const id = toast.loading('Processing...', 'This cannot be dismissed', {
+              dismissible: false,
+              duration: 0
+            })
+            setTimeout(() => {
+              updateToast(id, {
+                type: 'success',
+                title: 'Done!',
+                dismissible: true,
+                duration: 4000
+              })
+            }, 3000)
+          }}
+        >
+          Non-Dismissible Loading
+        </Button>
+      </div>
+
+      {/* Stacking Demo */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Stacking (Same Type)</h3>
+        <Button variant='outline' 
+          onClick={() => {
+            toast.success('Item Added', 'Product added to cart')
+            setTimeout(() => toast.success('Item Added', 'Product added to cart'), 500)
+            setTimeout(() => toast.success('Item Added', 'Product added to cart'), 1000)
+          }}
+        >
+          Trigger Multiple Same Toasts
+        </Button>
+      </div>
+
+      {/* Swipe to Dismiss Hint */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Interactive Features</h3>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">
+            • <strong>Swipe to dismiss:</strong> Drag toasts left or right to dismiss them
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • <strong>Pause on hover:</strong> Hover over a toast to pause auto-dismiss
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • <strong>Keyboard shortcut:</strong> Press ESC to dismiss the most recent toast
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • <strong>Expand/Collapse:</strong> Click on long toasts to expand or collapse them
+          </p>
+        </div>
+        <Button variant='outline'  onClick={() => toast.info('Try Me!', 'Hover, swipe, or press ESC')}>
+          Try Interactive Toast
+        </Button>
+      </div>
+
+      {/* Spam Test (Queue System) */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Queue System (Limit Test)</h3>
+        <Button variant='outline' 
+          onClick={() => {
+            for (let i = 1; i <= 10; i++) {
+              setTimeout(() => {
+                toast.info(`Toast ${i}`, `This is toast number ${i}`)
+              }, i * 100)
+            }
+          }}
+        >
+          Trigger 10 Toasts (Tests Limit)
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+
+const ToastComponent1: React.FC<{ toast: Toast; onDismiss: () => void }> = ({ toast, onDismiss }) => {
+  const variant = toast.variant || 'simple'
+  const styles = styleConfigs[variant]?.[toast.type] || styleConfigs.simple[toast.type]
+  const IconComponent = toastIcons[toast.type]
+
+  useEffect(() => {
+    if (toast.duration !== 0) {
+      const timer = setTimeout(() => {
+        onDismiss()
+      }, toast.duration || 4000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [toast.duration, onDismiss])
+
+  return (
+    <div className={`
+      relative flex items-start gap-3 rounded-lg shadow-lg backdrop-blur-sm
+      animate-in slide-in-from-top-2 fade-in-0 duration-300
+      ${styles.container}
+    `}>
+      {IconComponent && (
+        <IconComponent className={`w-5 h-5 mt-0.5 flex-shrink-0 ${styles.icon}`} />
+      )}
+
+      <div className="flex-1 min-w-0">
+        <div className={`font-semibold text-sm ${styles.title}`}>
+          {toast.title}
+        </div>
+        {toast.description && (
+          <div className={`text-sm mt-1 ${styles.description}`}>
+            {toast.description}
+          </div>
+        )}
+
+        {toast.action && (
+          <button
+            onClick={toast.action.onClick}
+            className={`mt-2 px-3 py-1.5 text-xs rounded-md transition-colors ${styles.button}`}
+          >
+            {toast.action.label}
+          </button>
+        )}
+      </div>
+
+      {toast.dismissible !== false && (
+        <button
+          onClick={onDismiss}
+          className={`p-1 rounded-md transition-colors flex-shrink-0 ${styles.dismissButton}`}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </div>
+  )
+}
+const ToastContainer1: React.FC = ({ position }) => {
+  const context = useContext(ToastContext);
+  const p = position;
+
+  if (!context || context.toasts.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn(
+      "fixed z-50 flex flex-col gap-2 max-w-sm w-full",
+      p === "top-right" ? "top-4 right-4" :
+        p === "top-center" ? "top-4 left-1/2 transform -translate-x-1/2" :
+          p === "top-left" ? "top-4 left-4" :
+            p === "bottom-right" ? "bottom-4 right-4" :
+              p === "bottom-center" ? "bottom-4 left-1/2 transform -translate-x-1/2" :
+                p === "bottom-left" ? "bottom-4 left-4" :
+                  "top-4 left-1/2 transform -translate-x-1/2"
+    )}>
+      {context.toasts.map((toast) => (
+        <ToastComponent
+          key={toast.id}
+          toast={toast}
+          onDismiss={() => context.removeToast(toast.id)}
+        />
+      ))}
+    </div>
+  );
+};
+export function Toasty1({ positoin = 'top-center', children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  const addToast = useCallback((toast: Omit<Toast, 'id'>) => {
+    const id = Date.now().toString() + Math.random().toString(36).substr(2, 9)
+    const newToast = { ...toast, id }
+
+    setToasts((prev) => [...prev, newToast])
+  }, [])
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id))
+  }, [])
+
+  const toastMethods = {
+    success: (title: string, description?: string, options?: Partial<Toast>) =>
+      addToast({ type: 'success', title, description, ...options }),
+    warning: (title: string, description?: string, options?: Partial<Toast>) =>
+      addToast({ type: 'warning', title, description, ...options }),
+    error: (title: string, description?: string, options?: Partial<Toast>) =>
+      addToast({ type: 'error', title, description, ...options }),
+    info: (title: string, description?: string, options?: Partial<Toast>) =>
+      addToast({ type: 'info', title, description, ...options }),
+    default: (title: string, description?: string, options?: Partial<Toast>) =>
+      addToast({ type: 'default', title, description, ...options }),
+  }
+
+  const contextValue: ToastContextType = {
+    toasts,
+    addToast,
+    removeToast,
+    toast: toastMethods,
+  }
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      <ToastContainer positoin={positoin} />
+    </ToastContext.Provider>
+  )
+}
+
+
+export function ToastDemo1() {
+  const { toast } = useToasted()
+  // toast.default('default', 'Accent default toast', { variant: 'accent' })
+  // toast.success('success', 'Accent success toast', { variant: 'accent' })
+  // toast.warning('warning!', 'Simple warning toast', { variant: 'accent' })
+  // toast.error('error!', 'Simple error toast', { variant: 'accent' })
+  // toast.info('info!', 'Simple info toast', { variant: 'accent' })
+  return (
+    <div className="min-h-screen bg-background p-8">
+      <div className="max-w-2xl mx-auto">
+        <h1 className="text-3xl font-bold text-foreground mb-8 text-center">
+          Toast Component Demo
+        </h1>
+
+        {/* Accent Variant */}
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold text-foreground">Accent Variant</h3>
+          <div className="grid gap-2 md:grid-cols-2">
+            <Button variant="outline"
+              onClick={() => toast.default('default', 'Accent default toast', { variant: 'accent' })}>
+              Accent default
+            </Button>
+            <Button variant="outline"
+              onClick={() => toast.success('success', 'Accent success toast', { variant: 'accent' })}>
+              Accent success
+            </Button>
+            <Button variant="outline"
+              onClick={() => toast.warning('warning!', 'Simple warning toast', { variant: 'accent' })}>
+              Simple warning
+            </Button>
+            <Button variant="outline"
+              onClick={() => toast.error('error!', 'Simple error toast', { variant: 'accent' })}>
+              Simple error
+            </Button>
+            <Button variant="outline"
+              onClick={() => toast.info('info!', 'Simple info toast', { variant: 'accent' })}>
+              Simple info
+            </Button>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          {/* Simple Variant */}
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold text-foreground">Simple Variant</h3>
+            <div className="grid gap-2 md:grid-cols-2">
+              <Button variant="outline" onClick={() => toast.success('Success!', 'Simple success toast', { variant: 'accent' })}>
+                Simple Success
+              </Button>
+              <Button variant="outline" onClick={() => toast.error('Error!', 'Simple error toast', { variant: 'simple' })}>
+                Simple Error
+              </Button>
+              <Button variant="outline" onClick={() => toast.warning('warning!', 'Simple warning toast', { variant: 'simple' })}>
+                Simple warning
+              </Button>
+              <Button variant="outline" onClick={() => toast.info('info!', 'Simple info toast', { variant: 'simple' })}>
+                Simple info
+              </Button>
+              <Button variant="outline" onClick={() => toast.default('default!', 'Simple default toast', { variant: 'simple' })}>
+                Simple default
+              </Button>
+
+            </div>
+          </div>
+
+          {/* Bordered Variant */}
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold text-foreground">Bordered Variant</h3>
+            <div className="grid gap-2 md:grid-cols-2">
+              <Button variant="outline"
+                onClick={() => toast.success('success!', 'Bordered success toast', { variant: 'bordered' })}>
+                Bordered Warning
+              </Button>
+              <Button variant="outline"
+                onClick={() => toast.error('error', 'Bordered error toast', { variant: 'bordered' })}>
+                Bordered Info
+              </Button>
+              <Button variant="outline"
+
+                onClick={() => toast.warning('warning!', 'Simple warning toast', { variant: 'bordered' })}>
+                Simple warning
+              </Button>
+              <Button variant="outline"
+                onClick={() => toast.info('info!', 'Simple info toast', { variant: 'bordered' })}>
+                Simple info
+              </Button>
+              <Button variant="outline"
+                onClick={() => toast.default('default!', 'Simple default toast', { variant: 'bordered' })}>
+                Simple default
+              </Button>
+
+            </div>
+          </div>
+
+          {/* Filled Variant */}
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold text-foreground">Filled Variant</h3>
+            <div className="grid gap-2 md:grid-cols-2">
+              <Button variant="outline" onClick={() => toast.success('Payment Complete', 'Filled success toast', { variant: 'filled' })}>
+                Filled Success
+              </Button>
+              <Button variant="outline" onClick={() => toast.error('Access Denied', 'Filled error toast', { variant: 'filled' })}>
+                Filled Error
+              </Button>
+              <Button variant="outline" onClick={() => toast.warning('warning!', 'Simple warning toast', { variant: 'filled' })}>
+                Simple warning
+              </Button>
+              <Button variant="outline" onClick={() => toast.info('info!', 'Simple info toast', { variant: 'filled' })}>
+                Simple info
+              </Button>
+              <Button variant="outline" onClick={() => toast.default('default!', 'Simple default toast', { variant: 'filled' })}>
+                Simple default
+              </Button>
+            </div>
+          </div>
+
+
+
+          {/* Card Variant */}
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold text-foreground">Card Variant</h3>
+            <div className="grid gap-2 md:grid-cols-2">
+              <Button variant="outline" onClick={() => toast.success('Mission Complete', 'Card success toast with backdrop blur', { variant: 'card' })}>
+                Card Success
+              </Button>
+              <Button variant="outline" onClick={() => toast.error('Critical Error', 'Card error toast with backdrop blur', { variant: 'card' })}>
+                Card Error
+              </Button>
+              <Button variant="outline" onClick={() => toast.warning('warning!', 'Simple warning toast', { variant: 'card' })}>
+                Simple warning
+              </Button>
+              <Button variant="outline" onClick={() => toast.info('info!', 'Simple info toast', { variant: 'card' })}>
+                Simple info
+              </Button>
+              <Button variant="outline" onClick={() => toast.default('default!', 'Simple default toast', { variant: 'card' })}>
+                Simple default
+              </Button>
+            </div>
+          </div>
+
+          {/* Minimal Variant */}
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold text-foreground">Minimal Variant</h3>
+            <div className="grid gap-2 md:grid-cols-2">
+              <Button variant="outline" onClick={() => toast.success('Saved', 'Minimal success toast', { variant: 'minimal' })}>
+                Minimal Success
+              </Button>
+              <Button variant="outline" onClick={() => toast.error('error', 'Minimal info toast', { variant: 'minimal' })}>
+                Minimal error
+              </Button>
+              <Button variant="outline" onClick={() => toast.warning('warning!', 'Simple warning toast', { variant: 'minimal' })}>
+                Simple warning
+              </Button>
+              <Button variant="outline" onClick={() => toast.info('info!', 'Simple info toast', { variant: 'minimal' })}>
+                Simple info
+              </Button>
+              <Button variant="outline" onClick={() => toast.default('default!', 'Simple default toast', { variant: 'minimal' })}>
+                Simple default
+              </Button>
+            </div>
+          </div>
+
+          {/* Special Options */}
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold text-foreground">Special Options</h3>
+            <div className="grid gap-2 md:grid-cols-2">
+              <Button variant="outline" onClick={() => toast.success('With Action', 'This toast has an action button', {
+                variant: 'bordered',
+                action: { label: 'Undo', onClick: () => toast.info('Undone!', 'Action was undone') }
+              })}>
+                Toast with Action
+              </Button>
+              <Button variant="outline" onClick={() => toast.error('Persistent', 'This toast stays until dismissed', {
+                variant: 'filled',
+                duration: 0
+              })}>
+                Persistent Toast
+              </Button>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+export const ToastDemo2: React.FC = () => {
+  return (
+    <Toasty>
+      <ToastDemo />
+    </Toasty>
+  );
+};
+