resources/js/components/ui/sonner.tsx

import { useFlashToast } from '@/hooks/use-flash-toast';
import { useAppearance } from '@/hooks/use-appearance';
import { Toaster as Sonner, type ToasterProps } from 'sonner';

function Toaster({ ...props }: ToasterProps) {
    const { appearance } = useAppearance();

    useFlashToast();

    return (
        <Sonner
            theme={appearance}
            className="toaster group"
            position="bottom-right"
            style={
                {
                    '--normal-bg': 'var(--popover)',
                    '--normal-text': 'var(--popover-foreground)',
                    '--normal-border': 'var(--border)',
                    '--success-bg': 'var(--app-primary-soft)',
                    '--success-border': 'var(--app-border-strong)',
                    '--success-text': 'var(--app-primary)',
                } as React.CSSProperties
            }
            {...props}
        />
    );
}

export { Toaster };