Toast

import { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, useToast, toastVariants, toastViewportVariants } from "@tesseract-nexus/tesserix-ui"

export {
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  useToast,
  toastVariants,
  toastViewportVariants,
} from "./toast"

export interface ToastProviderProps {
  children: React.ReactNode
}
export interface ToastViewportProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof toastViewportVariants> {}
 
const ToastViewport = React.forwardRef<HTMLDivElement, ToastViewportProps>(
  ({ className, position, ...props }, ref) => {
    const { toasts, dismiss } = useToastContext()
 
    return (
      <div ref={ref} className={cn(toastViewportVariants({ position }), className)} {...props}>
        {toasts.map(({ id, ...item }) => (
          <Toast key={id} id={id} onDismiss={dismiss} {...item} />
        ))}
      </div>
    )
  }
)
ToastViewport.displayName = "ToastViewport"
 
export {
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  useToast,
  toastVariants,
  toastViewportVariants,
}

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-start gap-3 rounded-xl border bg-card p-4 shadow-lg transition-all duration-200",
  {
    variants: {
      variant: {
        default: "border-border text-card-foreground",
        success: "border-emerald-500/30 bg-emerald-50 text-emerald-900 dark:bg-emerald-950 dark:text-emerald-200",
        warning: "border-amber-500/30 bg-amber-50 text-amber-900 dark:bg-amber-950 dark:text-amber-200",
        destructive: "border-destructive/40 bg-destructive/10 text-destructive",
        info: "border-primary/30 bg-primary/10 text-primary",
      },
    },
    defaultVariants: {
const toastViewportVariants = cva(
  "fixed z-[100] flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-md",
  {
    variants: {
      position: {
        "top-right": "right-0 top-0",
        "top-left": "left-0 top-0",
        "bottom-right": "bottom-0 right-0",
        "bottom-left": "bottom-0 left-0",
      },
    },
    defaultVariants: {

import { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, useToast, toastVariants, toastViewportVariants } from "@tesseract-nexus/tesserix-ui"
 
export function Example() {
  return <ToastProvider />
}

// Compose with domain wrappers in product code
<ToastProvider className="w-full" />

// Avoid one-off hardcoded values that bypass tokens
<ToastProvider className="bg-[#123456] text-[#fafafa] px-[13px]" />