"use client"; import * as React from "react"; import { Toast as BaseToast } from "@base-ui/react/toast"; import { cva, type VariantProps } from "class-variance-authority"; import { X } from "lucide-react"; import { cn } from "@/lib/utils"; import { buttonVariants } from "@/components/ui/button"; const ToastProvider = BaseToast.Provider; const ToastPortal = BaseToast.Portal; const toastViewportVariants = cva( "fixed z-[100] flex w-[380px] max-w-[calc(100vw-2rem)] flex-col outline-none gap-2", { variants: { position: { "top-left": "top-4 left-4 sm:top-8 sm:left-8", "top-center": "top-4 left-1/2 -translate-x-1/2 sm:top-8", "top-right": "top-4 right-4 sm:top-8 sm:right-8", "bottom-left": "bottom-4 left-4 sm:bottom-8 sm:left-8", "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 sm:bottom-8", "bottom-right": "bottom-4 right-4 sm:bottom-8 sm:right-8", }, }, defaultVariants: { position: "bottom-right", }, } ); const ToastViewport = ({ className, position, ...props }: React.ComponentProps & VariantProps) => ( ); const toastVariants = cva( "absolute w-full transition-all duration-300 ease-out flex flex-col rounded-lg border bg-background shadow-lg h-[var(--height)] z-[calc(100-var(--toast-index))]", { variants: { stack: { bottom: [ "bottom-0 origin-bottom", "[--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "data-[starting-style]:translate-y-full", "data-[ending-style]:data-[swipe-direction=down]:translate-y-full", ], top: [ "top-0 origin-top", "[--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]", "data-[starting-style]:-translate-y-full", "data-[ending-style]:data-[swipe-direction=up]:-translate-y-full", ], }, }, defaultVariants: { stack: "bottom", }, } ); const Toast = ({ className, stack, ...props }: React.ComponentProps & VariantProps) => { return ( ); }; const ToastContent = ({ className, ...props }: React.ComponentProps) => ( ); const ToastTitle = ({ className, ...props }: React.ComponentProps) => ( ); const ToastDescription = ({ className, ...props }: React.ComponentProps) => ( ); const ToastAction = ({ className, ...props }: React.ComponentProps) => ( ); const ToastClose = ({ className, ...props }: React.ComponentProps) => ( ); export { ToastProvider, ToastPortal, ToastViewport, Toast, ToastContent, ToastTitle, ToastDescription, ToastAction, ToastClose, };