Custom UI

<script setup lang="ts">
const toast = useToast()

toast.add({
  title: "Custom Styled Toast",
  description: "You can override specific parts",
  ui: {
    root: "rounded-2xl border-2 border-dashed",
    title: "text-lg font-bold",
    description: "text-sm italic",
  },
})
</script>

<script setup lang="ts">
const toast = useToast()

toast.add({
  type: "info",
  title: "Custom Border",
  description: "Toast with custom border styling",
  ui: {
    root: "rounded-2xl border-2 border-dashed border-primary-500",
  },
})
</script>

<script setup lang="ts">
const toast = useToast()

toast.add({
  type: "success",
  title: "Big Title",
  description: "Larger, bolder text",
  ui: {
    title: "text-xl font-bold",
    description: "text-base",
  },
})
</script>

<script setup lang="ts">
const toast = useToast()

toast.add({
  type: "warning",
  title: "Enhanced Shadow",
  description: "Toast with dramatic shadow effect",
  ui: {
    root: "shadow-2xl ring-1 ring-black/5 dark:ring-white/10",
  },
})
</script>

<script setup lang="ts">
const toast = useToast()

toast.add({
  type: "info",
  title: "Gradient Toast",
  description: "Beautiful gradient background",
  ui: {
    root: "bg-gradient-to-r from-purple-500 to-pink-500 text-white border-none",
    title: "text-white",
    description: "text-white/90",
  },
})
</script>

<script setup lang="ts">
const toast = useToast()

toast.add({
  type: "success",
  title: "Custom Actions",
  description: "Buttons with custom styling",
  actions: [{ label: "Confirm", onClick: () => console.log("Confirm") }],
  ui: {
    action:
      "bg-primary-600 hover:bg-primary-700 text-white font-semibold px-4 py-2 rounded-lg",
  },
})
</script>

<script setup lang="ts">
const toast = useToast()

toast.add({
  type: "info",
  title: "Minimal",
  description: "Clean and simple design",
  ui: {
    root: "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-sm",
    title: "text-sm font-semibold text-gray-900 dark:text-gray-50",
    description: "text-xs text-gray-600 dark:text-gray-300",
  },
})
</script>

// ✅ Good — Tailwind utilities (generated by Tailwind)
ui: { root: "rounded-2xl shadow-xl" }

// ⚠️ Custom classes are OK only if THEY EXIST in your CSS AND Tailwind isn't required to generate them.
// If you're relying on Tailwind to generate styles, use utilities instead.
ui: { root: "my-custom-toast" }

ui: {
  title: "text-gray-900 dark:text-gray-50",
  description: "text-gray-600 dark:text-gray-300",
}

ui: {
  root: "max-w-sm sm:max-w-md",
  title: "text-sm sm:text-base",
}