@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,1857 +0,0 @@
-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>
-  );
-};
-