diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx index 98d568d..fdc3825 100644 --- a/src/components/ui/toast.tsx +++ b/src/components/ui/toast.tsx @@ -23,13 +23,13 @@ const ToastViewport = React.forwardRef< ToastViewport.displayName = ToastPrimitives.Viewport.displayName; const toastVariants = cva( - "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", + "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full backdrop-blur-sm", { variants: { variant: { - default: "border bg-primary text-primary-foreground shadow-lg", + default: "border border-border/40 bg-background/60 text-foreground shadow-lg", destructive: - "destructive group border-destructive bg-destructive text-destructive-foreground font-medium", + "destructive group border-destructive/20 bg-destructive/60 text-destructive-foreground font-medium", }, }, defaultVariants: { @@ -41,11 +41,12 @@ const toastVariants = cva( const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps ->(({ className, variant, ...props }, ref) => { +>(({ className, variant, duration = 5000, ...props }, ref) => { return ( ); @@ -74,7 +75,7 @@ const ToastClose = React.forwardRef< (({ className, ...props }, ref) => ( )); diff --git a/src/components/ui/use-toast.ts b/src/components/ui/use-toast.ts index 10746f8..011d655 100644 --- a/src/components/ui/use-toast.ts +++ b/src/components/ui/use-toast.ts @@ -137,6 +137,12 @@ type Toast = Omit; function toast({ ...props }: Toast) { const id = genId(); + // Ensure all toasts have a close button and duration + const enhancedProps = { + ...props, + duration: props.duration || 5000, + }; + const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", @@ -147,10 +153,10 @@ function toast({ ...props }: Toast) { dispatch({ type: "ADD_TOAST", toast: { - ...props, + ...enhancedProps, id, open: true, - onOpenChange: (open) => { + onOpenChange: (open: boolean) => { if (!open) dismiss(); }, },