Initial Commit

app/components/ui/sonner/Sonner.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { ToasterProps } from 'vue-sonner'
+
+import { reactiveOmit } from '@vueuse/core'
+import { Toaster as Sonner } from 'vue-sonner'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToasterProps>()
+const delegatedProps = reactiveOmit(props, 'class', 'toastOptions')
+</script>
+
+<template>
+  <Sonner
+    :class="cn('toaster group', props.class)"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius)',
+      '--gray2': 'hsl(var(--popover) / 0.9)',
+      '--gray3': 'var(--border)',
+      '--gray4': 'var(--border)',
+      '--gray5': 'var(--border)',
+      '--gray12': 'var(--popover-foreground)',
+    }"
+    :toast-options="props.toastOptions ?? {
+      classes: {
+        toast: 'rounded-2xl!',
+      },
+    }"
+    v-bind="delegatedProps"
+  >
+    <template #success-icon>
+      <Icon name="ph:check-circle-fill" class="size-4" />
+    </template>
+    <template #info-icon>
+      <Icon name="ph:info-fill" class="size-4" />
+    </template>
+    <template #warning-icon>
+      <Icon name="ph:warning-fill" class="size-4" />
+    </template>
+    <template #error-icon>
+      <Icon name="ph:warning-octagon-fill" class="size-4" />
+    </template>
+    <template #loading-icon>
+      <div>
+        <Icon name="ph:circle-notch-fill" class="size-4 animate-spin" />
+      </div>
+    </template>
+    <template #close-icon>
+      <Icon name="ph:x-fill" class="size-4" />
+    </template>
+  </Sonner>
+</template>

app/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'