fix: toaster class

.gitignore

@@ -17,6 +17,7 @@ dist-ssr
 .vscode/*
 !.vscode/extensions.json
 .idea
+temp
 .DS_Store
 *.suo
 *.ntvs*

README.md

@@ -50,6 +50,8 @@ https://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a
     - [Expanded](#expanded)
     - [Styling for all toasts](#styling-for-all-toasts)
     - [Styling for individual toast](#styling-for-individual-toast)
+    - [Tailwind CSS](#tailwind-css)
+    - [Changing Icon](#changing-icon)
     - [Close button](#close-button)
     - [Rich colors](#rich-colors)
     - [Custom offset](#custom-offset)
@@ -304,6 +306,82 @@ toast('Event has been created', {
 })
 ```
 
+### Tailwind CSS
+
+The preferred way to style the toasts with tailwind is by using the `unstyled` prop. That will give you an unstyled toast which you can then style with tailwind.
+
+```vue
+<Toaster
+  :toastOptions="{
+    unstyled: true,
+    classes: {
+      toast: 'bg-blue-400',
+      title: 'text-red-400',
+      description: 'text-red-400',
+      actionButton: 'bg-zinc-400',
+      cancelButton: 'bg-orange-400',
+      closeButton: 'bg-lime-400'
+    }
+  }"
+/>
+```
+
+You can do the same when calling `toast()`.
+
+```ts
+toast('Hello World', {
+  unstyled: true,
+  classes: {
+    toast: 'bg-blue-400',
+    title: 'text-red-400 text-2xl',
+    description: 'text-red-400',
+    actionButton: 'bg-zinc-400',
+    cancelButton: 'bg-orange-400',
+    closeButton: 'bg-lime-400'
+  }
+})
+```
+
+Styling per toast type is also possible.
+
+```vue
+<Toaster 
+  :toastOptions="{
+    unstyled: true,
+    classes: {
+      error: 'bg-red-400',
+      success: 'text-green-400',
+      warning: 'text-yellow-400',
+      info: 'bg-blue-400',
+    }
+  }"
+/>
+```
+
+### Changing Icon
+
+You can change the default icons using slots:
+
+```vue
+<Toaster>
+  <template #loading-icon>
+    <LoadingIcon />
+  </template>
+  <template #success-icon>
+    <SuccessIcon />
+  </template>
+  <template #error-icon>
+    <ErrorIcon />
+  </template>
+  <template #info-icon>
+    <InfoIcon />
+  </template>
+  <template #warning-icon>
+    <WarningIcon />
+  </template>
+</Toaster>
+```
+
 ### Close button
 
 Add a close button to all toasts that shows on hover by adding the `closeButton` prop.

api-extractor.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "mainEntryPointFilePath": "<projectFolder>/temp/index.d.ts",
+  "bundledPackages": [],
+  "compiler": {
+    "tsconfigFilePath": "<projectFolder>/tsconfig.build.json"
+  },
+  "apiReport": {
+    "enabled": false
+  },
+  "docModel": {
+    "enabled": false
+  },
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "<projectFolder>/lib/<unscopedPackageName>.d.ts"
+  },
+  "tsdocMetadata": {
+    "enabled": false
+  },
+  "messages": {
+    "extractorMessageReporting": {
+      "ae-forgotten-export": {
+        "logLevel": "none"
+      },
+      "ae-missing-release-tag": {
+        "logLevel": "none"
+      }
+    }
+  }
+}

components.d.ts

@@ -7,8 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
-    'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
     CheckIcon: typeof import('./src/components/icons/CheckIcon.vue')['default']
     CopyIcon: typeof import('./src/components/icons/CopyIcon.vue')['default']
     Expand: typeof import('./src/components/Expand.vue')['default']
@@ -17,7 +15,6 @@ declare module 'vue' {
     HeadlessToastWithProps: typeof import('./src/components/HeadlessToastWithProps.vue')['default']
     Hero: typeof import('./src/components/Hero.vue')['default']
     Installation: typeof import('./src/components/Installation.vue')['default']
-    'Mdi:heart': typeof import('~icons/mdi/heart')['default']
     Others: typeof import('./src/components/Others.vue')['default']
     Position: typeof import('./src/components/Position.vue')['default']
     Styling: typeof import('./src/components/Styling.vue')['default']

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build:docs": "vite build --mode docs",
-    "build:lib": "vite build --mode lib && vue-tsc -p tsconfig.build.json",
+    "build:lib": "vite build --mode lib && pnpm run build:types",
+    "build:types": "vue-tsc -p tsconfig.build.json && api-extractor run",
     "preview": "vite preview",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
   },
@@ -23,18 +24,19 @@
   "module": "./lib/vue-sonner.js",
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
+      "types": "./lib/vue-sonner.d.ts",
       "import": "./lib/vue-sonner.js",
       "require": "./lib/vue-sonner.cjs"
     }
   },
   "sideEffects": [
     "**/*.css"
   ],
-  "types": "./lib/index.d.ts",
+  "types": "./lib/vue-sonner.d.ts",
   "license": "MIT",
   "devDependencies": {
     "@iconify/json": "^2.2.172",
+    "@microsoft/api-extractor": "^7.42.1",
     "@types/node": "^18.19.8",
     "@unocss/reset": "^0.58.5",
     "@vitejs/plugin-vue": "^5.0.4",
@@ -49,6 +51,6 @@
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.4",
     "vue": "^3.4.21",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.1"
   }
 }

packages/Toaster.vue

@@ -5,6 +5,7 @@
       <ol
         ref="listRef"
         data-sonner-toaster
+        :class="class"
         :dir="dir === 'auto' ? getDocumentDirection() : dir"
         :tabIndex="-1"
         :data-theme="theme"
@@ -35,6 +36,7 @@
         "
         @pointerdown="onPointerDown"
         @pointerup="interacting = false"
+        v-bind="$attrs"
       >
         <template
           v-for="(toast, idx) in toasts.filter(