@rayhanbapari/vue-toastr 0.1.0

package/LICENCE

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2025 Rayhan Bapari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,170 @@
+# @rayhanbapari/vue-toastr
+
+> Elegant toast notifications for **Vue 3**, inspired by Toastr.
+
+---
+
+## ✨ Features
+
+- ⚡ Simple API: `toastr.success('Title')`
+- 🎨 Clean, modern design
+- 📍 6 positions: top/bottom left/center/right
+- ⏳ Auto-close + bottom progress bar
+- ⚙️ Customizable global options
+- 🧩 Written in TypeScript + Vue 3
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @rayhanbapari/vue-toastr
+# or
+yarn add @rayhanbapari/vue-toastr
+```
+
+## Register the plugin
+
+```javascript
+import { createApp } from 'vue';
+import App from './App.vue';
+
+import Toastr from '@rayhanbapari/vue-toastr';
+import '@rayhanbapari/vue-toastr/style.css';
+
+createApp(App)
+  .use(Toastr)
+  .mount('#app');
+
+
+// Add the container once
+<script setup lang="ts">
+import { ToastrContainer } from '@rayhanbapari/vue-toastr';
+</script>
+
+<template>
+  <RouterView />
+  <ToastrContainer />
+</template>
+```
+
+## 💬 Triggering Notifications
+
+```javascript
+// Basic usage
+toastr.success('Operation successful!');
+toastr.error('Something went wrong!');
+toastr.warning('Please check your input.');
+toastr.info('New update available.');
+
+// With custom options
+toastr.success('Custom toast', {
+  position: 'bottom-right',
+  autoClose: 5000,
+  progress: false,
+});
+
+// Set global defaults
+toastr.options({
+  position: 'top-right',
+  autoClose: 4000,
+  progress: true,
+});
+
+// Using the composable
+import { useToastr } from '@rayhanbapari/vue-toastr';
+const toastr = useToastr();
+toastr.success('Data saved!');
+```
+
+## 🔧 Framework Integrations
+
+### Nuxt 3
+
+Register the plugin in `nuxt.config.ts`:
+
+```javascript
+export default defineNuxtConfig({
+  modules: [
+    // ... other modules
+  ],
+  css: ['@rayhanbapari/vue-toastr/style.css'],
+  plugins: [
+    '~/plugins/toastr.client.js', // Create this file
+  ],
+});
+```
+
+Create `plugins/toastr.client.js`:
+
+```javascript
+import Toastr from '@rayhanbapari/vue-toastr';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(Toastr);
+});
+```
+
+Add the container in your `app.vue` or layout:
+
+```vue
+<template>
+  <div>
+    <NuxtPage />
+    <ClientOnly>
+      <ToastrContainer />
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup>
+import { ToastrContainer } from '@rayhanbapari/vue-toastr';
+</script>
+```
+
+### Vue Inertia
+
+Register the plugin in your main app file:
+
+```javascript
+import { createApp, h } from 'vue';
+import { createInertiaApp } from '@inertiajs/vue3';
+import Toastr from '@rayhanbapari/vue-toastr';
+import '@rayhanbapari/vue-toastr/style.css';
+
+createInertiaApp({
+  resolve: (name) => require(`./Pages/${name}`),
+  setup({ el, App, props, plugin }) {
+    createApp({ render: () => h(App, props) })
+      .use(plugin)
+      .use(Toastr)
+      .mount(el);
+  },
+});
+```
+
+Add the container in your main layout:
+
+```vue
+<template>
+  <main>
+    <slot />
+  </main>
+  <ToastrContainer />
+</template>
+
+<script setup>
+import { ToastrContainer } from '@rayhanbapari/vue-toastr';
+</script>
+```
+
+## ⚙️ Available Options
+
+| Option      | Type                                                                                              | Default        | Description                                 |
+| ----------- | ------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------- |
+| `position`  | `"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"` | `"top-center"` | Toast placement                             |
+| `autoClose` | `number \| false`                                                                                 | `3000`         | Auto close delay (ms) or `false` to disable |
+| `progress`  | `boolean`                                                                                         | `true`         | Show bottom progress bar                    |
+
+# vue-toastr
+# vue-toastr

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/core/service.ts","../src/plugin/index.ts","../src/components/ToastrContainer.vue","unplugin-vue:\u0000/plugin-vue/export-helper"],"sourcesContent":["import Plugin from '@/plugin/index';\nexport * from '@/core/types';\nexport { toastr } from '@/plugin/index';\nexport { default as ToastrContainer } from '@/components/ToastrContainer.vue';\nimport './styles/style.css';\n\nexport default Plugin;\n","import { reactive } from 'vue';\nimport type { NotyItem, NotyOptions, NotyType } from '@/core/types';\n\nconst defaults: Required<NotyOptions> = {\n  position: 'top-center',\n  autoClose: 3000,\n  progress: true,\n};\n\nlet idCounter = 1;\n\nexport const store = reactive({\n  options: { ...defaults } as Required<NotyOptions>,\n  items: [] as NotyItem[],\n});\n\nfunction makeOptions(opts?: NotyOptions): Required<NotyOptions> {\n  return { ...store.options, ...(opts || {}) };\n}\n\nfunction push(type: NotyType, title: string, opts?: NotyOptions) {\n  const options = makeOptions(opts);\n  const item: NotyItem = {\n    id: idCounter++,\n    type,\n    title,\n    options,\n    createdAt: Date.now(),\n  };\n  store.items.push(item);\n\n  if (options.autoClose !== false && typeof window !== 'undefined') {\n    setTimeout(() => remove(item.id), options.autoClose);\n  }\n}\n\nexport function remove(id: number) {\n  const i = store.items.findIndex((t) => t.id === id);\n  if (i !== -1) store.items.splice(i, 1);\n}\n\nexport function clear() {\n  store.items.splice(0, store.items.length);\n}\n\nexport function setDefaults(opts: NotyOptions) {\n  store.options = { ...store.options, ...opts };\n}\n\nexport const api = {\n  success: (title: string, opts?: NotyOptions) => push('success', title, opts),\n  error: (title: string, opts?: NotyOptions) => push('error', title, opts),\n  warning: (title: string, opts?: NotyOptions) => push('warning', title, opts),\n  info: (title: string, opts?: NotyOptions) => push('info', title, opts),\n\n  options: (opts: NotyOptions) => setDefaults(opts),\n  clear,\n  setDefaults,\n  getNotifications: () => store.items.slice(),\n};\n","import type { App } from 'vue';\nimport { api } from '@/core/service';\n\ndeclare module 'vue' {\n  interface ComponentCustomProperties {\n    $toastr: typeof api;\n  }\n}\n\nexport default {\n  install(app: App) {\n    app.config.globalProperties.$toastr = api;\n    if (typeof window !== 'undefined') {\n      // @ts-ignore\n      window.toastr = api;\n    }\n  },\n};\n\nexport { api as toastr };\n","<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { store, remove } from '@/core/service';\nimport type { NotyItem, NotyPosition } from '@/core/types';\n\nconst isClient = ref(false);\n\nif (typeof window !== 'undefined') {\n  isClient.value = true;\n}\n\nconst groups = computed<Record<NotyPosition, NotyItem[]>>(() => {\n  const map: Record<NotyPosition, NotyItem[]> = {\n    'top-left': [],\n    'top-center': [],\n    'top-right': [],\n    'bottom-left': [],\n    'bottom-center': [],\n    'bottom-right': [],\n  };\n  for (const t of store.items) map[t.options.position].push(t);\n  return map;\n});\n</script>\n\n<template>\n  <Teleport v-if=\"isClient\" to=\"body\">\n    <TransitionGroup\n      v-for=\"(items, pos) in groups\"\n      :key=\"pos\"\n      tag=\"div\"\n      name=\"toast\"\n      class=\"toast-list\"\n      :data-position=\"pos\"\n    >\n      <article\n        v-for=\"t in items\"\n        :key=\"t.id\"\n        class=\"toast\"\n        :class=\"[\n          `toast-${t.type}`,\n          { 'toast-auto-close': t.options.progress && t.options.autoClose !== false },\n        ]\"\n        :data-position=\"pos\"\n      >\n        <div class=\"toast-content\">\n          <span class=\"toast-title\">{{ t.title }}</span>\n        </div>\n\n        <div\n          v-if=\"t.options.progress && t.options.autoClose !== false\"\n          class=\"toast-progress\"\n          :style=\"{ animationDuration: (t.options.autoClose || 0) + 'ms' }\"\n        ></div>\n\n        <div class=\"toast-close\">\n          <button type=\"button\" @click=\"remove(t.id)\" aria-label=\"Dismiss notification\">x</button>\n        </div>\n      </article>\n    </TransitionGroup>\n  </Teleport>\n</template>\n","\nexport default (sfc, props) => {\n  const target = sfc.__vccOpts || sfc;\n  for (const [key, val] of props) {\n    target[key] = val;\n  }\n  return target;\n}\n"],"mappings":"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","names":["import_vue","_openBlock","_createBlock","_Teleport","_createElementBlock","_Fragment","_renderList","_TransitionGroup","_normalizeClass","_createElementVNode","_toDisplayString","_normalizeStyle"]}

package/dist/index.css

@@ -0,0 +1,230 @@
+@import "https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";
+
+/* src/styles/style.css */
+:root {
+  --toast-info: #385bbb;
+  --toast-info-rgb:
+    56,
+    91,
+    187;
+  --toast-info-darker: hsl(224, 54%, 35%);
+  --toast-warning: #f3950d;
+  --toast-warning-rgb:
+    243,
+    149,
+    13;
+  --toast-warning-darker: hsl(35, 91%, 40%);
+  --toast-error: #d32f2f;
+  --toast-error-rgb:
+    211,
+    47,
+    47;
+  --toast-error-darker: hsl(0, 68%, 43%);
+  --toast-success: #388e3c;
+  --toast-success-rgb:
+    56,
+    142,
+    60;
+  --toast-success-darker: hsl(120, 54%, 35%);
+}
+@keyframes toastSlideFromTop {
+  0% {
+    opacity: 0;
+    translate: 0 calc(-100% - 24px);
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes toastSlideFromBottom {
+  0% {
+    opacity: 0;
+    translate: 0 calc(100% + 24px);
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes toastFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes progressBar {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+.toast-list {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  pointer-events: none;
+  z-index: 99999;
+  width: max-content;
+  max-width: calc(100vw - 48px);
+}
+.toast-list > * {
+  pointer-events: auto;
+}
+.toast-list[data-position^=top] {
+  top: 24px;
+}
+.toast-list[data-position^=bottom] {
+  bottom: 24px;
+}
+.toast-list[data-position$=left] {
+  left: 24px;
+  right: auto;
+  transform: none;
+  align-items: flex-start;
+}
+.toast-list[data-position$=center] {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.toast-list[data-position$=right] {
+  right: 24px;
+  left: auto;
+  transform: none;
+  align-items: flex-end;
+}
+.toast {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  padding-right: 50px;
+  min-width: 280px;
+  max-width: 400px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  font-family:
+    "Nunito Sans",
+    system-ui,
+    helvetica,
+    sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  box-shadow:
+    0 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  color: var(--toast-info-darker);
+  background-clip: padding-box;
+}
+.toast-list[data-position^=top] .toast {
+  animation: toastSlideFromTop 0.5s ease-out forwards;
+}
+.toast-list[data-position^=bottom] .toast {
+  animation: toastSlideFromBottom 0.5s ease-out forwards;
+}
+.toast.toast-success {
+  color: var(--toast-success);
+  border-color: var(--toast-success);
+}
+.toast.toast-error {
+  color: var(--toast-error);
+  border-color: var(--toast-error);
+}
+.toast.toast-warning {
+  color: var(--toast-warning);
+  border-color: var(--toast-warning);
+}
+.toast.toast-info {
+  color: var(--toast-info);
+  border-color: var(--toast-info);
+}
+.toast-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.toast-title {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.4;
+}
+.toast-progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  border-radius: 50px;
+  transform-origin: left;
+  background-color: currentColor;
+  animation: progressBar linear forwards;
+}
+.toast-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.toast-close button {
+  padding: 8px;
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  color: inherit;
+  font-size: 16px;
+  line-height: 1;
+}
+.toast-close button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+.toast-close button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.toast-enter-active,
+.toast-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+}
+.toast-list[data-position^=top] .toast-enter-from,
+.toast-list[data-position^=top] .toast-leave-to {
+  transform: translateY(-16px);
+}
+.toast-list[data-position^=bottom] .toast-enter-from,
+.toast-list[data-position^=bottom] .toast-leave-to {
+  transform: translateY(16px);
+}
+.toast-move {
+  transition: transform 0.2s ease;
+}
+@media (max-width: 480px) {
+  .toast {
+    min-width: calc(100vw - 48px);
+    max-width: calc(100vw - 48px);
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/style.css"],"sourcesContent":["@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap);\n\n:root {\n\t--toast-info: #385bbb;\n\t--toast-info-rgb: 56, 91, 187;\n\t--toast-info-darker: hsl(224, 54%, 35%);\n\t--toast-warning: #f3950d;\n\t--toast-warning-rgb: 243, 149, 13;\n\t--toast-warning-darker: hsl(35, 91%, 40%);\n\t--toast-error: #d32f2f;\n\t--toast-error-rgb: 211, 47, 47;\n\t--toast-error-darker: hsl(0, 68%, 43%);\n\t--toast-success: #388e3c;\n\t--toast-success-rgb: 56, 142, 60;\n\t--toast-success-darker: hsl(120, 54%, 35%);\n}\n\n@keyframes toastSlideFromTop {\n\t0% {\n\t\topacity: 0;\n\t\ttranslate: 0 calc(-100% - 24px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttranslate: 0 0;\n\t}\n}\n\n@keyframes toastSlideFromBottom {\n\t0% {\n\t\topacity: 0;\n\t\ttranslate: 0 calc(100% + 24px);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttranslate: 0 0;\n\t}\n}\n\n@keyframes toastFadeOut {\n\t0% {\n\t\topacity: 1;\n\t}\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n@keyframes progressBar {\n\t0% {\n\t\ttransform: scaleX(1);\n\t}\n\t100% {\n\t\ttransform: scaleX(0);\n\t}\n}\n\n.toast-list {\n\tposition: fixed;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tpointer-events: none;\n\tz-index: 99999;\n\twidth: max-content;\n\tmax-width: calc(100vw - 48px);\n}\n\n.toast-list > * {\n\tpointer-events: auto;\n}\n\n.toast-list[data-position^='top'] {\n\ttop: 24px;\n}\n\n.toast-list[data-position^='bottom'] {\n\tbottom: 24px;\n}\n\n.toast-list[data-position$='left'] {\n\tleft: 24px;\n\tright: auto;\n\ttransform: none;\n\talign-items: flex-start;\n}\n\n.toast-list[data-position$='center'] {\n\tleft: 50%;\n\tright: auto;\n\ttransform: translateX(-50%);\n\talign-items: center;\n}\n\n.toast-list[data-position$='right'] {\n\tright: 24px;\n\tleft: auto;\n\ttransform: none;\n\talign-items: flex-end;\n}\n\n.toast {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\tpadding: 16px 20px;\n\tpadding-right: 50px;\n\tmin-width: 280px;\n\tmax-width: 400px;\n\tbackground-color: #fff;\n\tborder-radius: 8px;\n\tborder: 2px solid transparent;\n\tfont-family: 'Nunito Sans', system-ui, helvetica, sans-serif;\n\tfont-size: 15px;\n\tfont-weight: 600;\n\tline-height: 1.4;\n\tbox-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),\n\t\t0 1px 10px 0 rgba(0, 0, 0, 0.12);\n\toverflow: hidden;\n\tcolor: var(--toast-info-darker);\n\tbackground-clip: padding-box;\n}\n\n.toast-list[data-position^='top'] .toast {\n\tanimation: toastSlideFromTop 0.5s ease-out forwards;\n}\n\n.toast-list[data-position^='bottom'] .toast {\n\tanimation: toastSlideFromBottom 0.5s ease-out forwards;\n}\n\n.toast.toast-success {\n\tcolor: var(--toast-success);\n\tborder-color: var(--toast-success);\n}\n\n.toast.toast-error {\n\tcolor: var(--toast-error);\n\tborder-color: var(--toast-error);\n}\n\n.toast.toast-warning {\n\tcolor: var(--toast-warning);\n\tborder-color: var(--toast-warning);\n}\n\n.toast.toast-info {\n\tcolor: var(--toast-info);\n\tborder-color: var(--toast-info);\n}\n\n.toast-content {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n}\n\n.toast-title {\n\tfont-weight: 600;\n\tfont-size: 15px;\n\tline-height: 1.4;\n}\n\n.toast-progress {\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\theight: 3px;\n\tborder-radius: 50px;\n\ttransform-origin: left;\n\tbackground-color: currentColor;\n\tanimation: progressBar linear forwards;\n}\n\n.toast-close {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: absolute;\n\tright: 8px;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n}\n\n.toast-close button {\n\tpadding: 8px;\n\tmargin: 0;\n\tborder: none;\n\tbackground-color: transparent;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\ttransition: background-color 0.2s ease;\n\tcolor: inherit;\n\tfont-size: 16px;\n\tline-height: 1;\n}\n\n.toast-close button:focus-visible {\n\toutline: 2px solid currentColor;\n\toutline-offset: 2px;\n}\n\n.toast-close button:hover {\n\tbackground-color: rgba(0, 0, 0, 0.05);\n}\n\n.toast-enter-active,\n.toast-leave-active {\n\ttransition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.toast-enter-from,\n.toast-leave-to {\n\topacity: 0;\n}\n\n.toast-list[data-position^='top'] .toast-enter-from,\n.toast-list[data-position^='top'] .toast-leave-to {\n\ttransform: translateY(-16px);\n}\n\n.toast-list[data-position^='bottom'] .toast-enter-from,\n.toast-list[data-position^='bottom'] .toast-leave-to {\n\ttransform: translateY(16px);\n}\n\n.toast-move {\n\ttransition: transform 0.2s ease;\n}\n\n@media (max-width: 480px) {\n\t.toast {\n\t\tmin-width: calc(100vw - 48px);\n\t\tmax-width: calc(100vw - 48px);\n\t}\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,51 @@
+import { App } from 'vue';
+export { default as ToastrContainer } from '@/components/ToastrContainer.vue';
+
+type NotyType = 'success' | 'error' | 'warning' | 'info';
+type NotyPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface NotyOptions {
+    position?: NotyPosition;
+    autoClose?: number | false;
+    progress?: boolean;
+}
+interface NotyItem {
+    id: number;
+    type: NotyType;
+    title: string;
+    options: Required<NotyOptions>;
+    createdAt: number;
+}
+
+declare function clear(): void;
+declare function setDefaults(opts: NotyOptions): void;
+declare const api: {
+    success: (title: string, opts?: NotyOptions) => void;
+    error: (title: string, opts?: NotyOptions) => void;
+    warning: (title: string, opts?: NotyOptions) => void;
+    info: (title: string, opts?: NotyOptions) => void;
+    options: (opts: NotyOptions) => void;
+    clear: typeof clear;
+    setDefaults: typeof setDefaults;
+    getNotifications: () => {
+        id: number;
+        type: NotyType;
+        title: string;
+        options: {
+            position: NotyPosition;
+            autoClose: number | false;
+            progress: boolean;
+        };
+        createdAt: number;
+    }[];
+};
+
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $toastr: typeof api;
+    }
+}
+declare const _default: {
+    install(app: App): void;
+};
+
+export { type NotyItem, type NotyOptions, type NotyPosition, type NotyType, _default as default, api as toastr };

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import { App } from 'vue';
+export { default as ToastrContainer } from '@/components/ToastrContainer.vue';
+
+type NotyType = 'success' | 'error' | 'warning' | 'info';
+type NotyPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface NotyOptions {
+    position?: NotyPosition;
+    autoClose?: number | false;
+    progress?: boolean;
+}
+interface NotyItem {
+    id: number;
+    type: NotyType;
+    title: string;
+    options: Required<NotyOptions>;
+    createdAt: number;
+}
+
+declare function clear(): void;
+declare function setDefaults(opts: NotyOptions): void;
+declare const api: {
+    success: (title: string, opts?: NotyOptions) => void;
+    error: (title: string, opts?: NotyOptions) => void;
+    warning: (title: string, opts?: NotyOptions) => void;
+    info: (title: string, opts?: NotyOptions) => void;
+    options: (opts: NotyOptions) => void;
+    clear: typeof clear;
+    setDefaults: typeof setDefaults;
+    getNotifications: () => {
+        id: number;
+        type: NotyType;
+        title: string;
+        options: {
+            position: NotyPosition;
+            autoClose: number | false;
+            progress: boolean;
+        };
+        createdAt: number;
+    }[];
+};
+
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $toastr: typeof api;
+    }
+}
+declare const _default: {
+    install(app: App): void;
+};
+
+export { type NotyItem, type NotyOptions, type NotyPosition, type NotyType, _default as default, api as toastr };

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/service.ts","../src/plugin/index.ts","../src/components/ToastrContainer.vue","unplugin-vue:\u0000/plugin-vue/export-helper","../src/index.ts"],"sourcesContent":["import { reactive } from 'vue';\nimport type { NotyItem, NotyOptions, NotyType } from '@/core/types';\n\nconst defaults: Required<NotyOptions> = {\n  position: 'top-center',\n  autoClose: 3000,\n  progress: true,\n};\n\nlet idCounter = 1;\n\nexport const store = reactive({\n  options: { ...defaults } as Required<NotyOptions>,\n  items: [] as NotyItem[],\n});\n\nfunction makeOptions(opts?: NotyOptions): Required<NotyOptions> {\n  return { ...store.options, ...(opts || {}) };\n}\n\nfunction push(type: NotyType, title: string, opts?: NotyOptions) {\n  const options = makeOptions(opts);\n  const item: NotyItem = {\n    id: idCounter++,\n    type,\n    title,\n    options,\n    createdAt: Date.now(),\n  };\n  store.items.push(item);\n\n  if (options.autoClose !== false && typeof window !== 'undefined') {\n    setTimeout(() => remove(item.id), options.autoClose);\n  }\n}\n\nexport function remove(id: number) {\n  const i = store.items.findIndex((t) => t.id === id);\n  if (i !== -1) store.items.splice(i, 1);\n}\n\nexport function clear() {\n  store.items.splice(0, store.items.length);\n}\n\nexport function setDefaults(opts: NotyOptions) {\n  store.options = { ...store.options, ...opts };\n}\n\nexport const api = {\n  success: (title: string, opts?: NotyOptions) => push('success', title, opts),\n  error: (title: string, opts?: NotyOptions) => push('error', title, opts),\n  warning: (title: string, opts?: NotyOptions) => push('warning', title, opts),\n  info: (title: string, opts?: NotyOptions) => push('info', title, opts),\n\n  options: (opts: NotyOptions) => setDefaults(opts),\n  clear,\n  setDefaults,\n  getNotifications: () => store.items.slice(),\n};\n","import type { App } from 'vue';\nimport { api } from '@/core/service';\n\ndeclare module 'vue' {\n  interface ComponentCustomProperties {\n    $toastr: typeof api;\n  }\n}\n\nexport default {\n  install(app: App) {\n    app.config.globalProperties.$toastr = api;\n    if (typeof window !== 'undefined') {\n      // @ts-ignore\n      window.toastr = api;\n    }\n  },\n};\n\nexport { api as toastr };\n","<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { store, remove } from '@/core/service';\nimport type { NotyItem, NotyPosition } from '@/core/types';\n\nconst isClient = ref(false);\n\nif (typeof window !== 'undefined') {\n  isClient.value = true;\n}\n\nconst groups = computed<Record<NotyPosition, NotyItem[]>>(() => {\n  const map: Record<NotyPosition, NotyItem[]> = {\n    'top-left': [],\n    'top-center': [],\n    'top-right': [],\n    'bottom-left': [],\n    'bottom-center': [],\n    'bottom-right': [],\n  };\n  for (const t of store.items) map[t.options.position].push(t);\n  return map;\n});\n</script>\n\n<template>\n  <Teleport v-if=\"isClient\" to=\"body\">\n    <TransitionGroup\n      v-for=\"(items, pos) in groups\"\n      :key=\"pos\"\n      tag=\"div\"\n      name=\"toast\"\n      class=\"toast-list\"\n      :data-position=\"pos\"\n    >\n      <article\n        v-for=\"t in items\"\n        :key=\"t.id\"\n        class=\"toast\"\n        :class=\"[\n          `toast-${t.type}`,\n          { 'toast-auto-close': t.options.progress && t.options.autoClose !== false },\n        ]\"\n        :data-position=\"pos\"\n      >\n        <div class=\"toast-content\">\n          <span class=\"toast-title\">{{ t.title }}</span>\n        </div>\n\n        <div\n          v-if=\"t.options.progress && t.options.autoClose !== false\"\n          class=\"toast-progress\"\n          :style=\"{ animationDuration: (t.options.autoClose || 0) + 'ms' }\"\n        ></div>\n\n        <div class=\"toast-close\">\n          <button type=\"button\" @click=\"remove(t.id)\" aria-label=\"Dismiss notification\">x</button>\n        </div>\n      </article>\n    </TransitionGroup>\n  </Teleport>\n</template>\n","\nexport default (sfc, props) => {\n  const target = sfc.__vccOpts || sfc;\n  for (const [key, val] of props) {\n    target[key] = val;\n  }\n  return target;\n}\n","import Plugin from '@/plugin/index';\nexport * from '@/core/types';\nexport { toastr } from '@/plugin/index';\nexport { default as ToastrContainer } from '@/components/ToastrContainer.vue';\nimport './styles/style.css';\n\nexport default Plugin;\n"],"mappings":";AAAA,SAAS,gBAAgB;AAGzB,IAAM,WAAkC;AAAA,EACtC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AACZ;AAEA,IAAI,YAAY;AAET,IAAM,QAAQ,SAAS;AAAA,EAC5B,SAAS,EAAE,GAAG,SAAS;AAAA,EACvB,OAAO,CAAC;AACV,CAAC;AAED,SAAS,YAAY,MAA2C;AAC9D,SAAO,EAAE,GAAG,MAAM,SAAS,GAAI,QAAQ,CAAC,EAAG;AAC7C;AAEA,SAAS,KAAK,MAAgB,OAAe,MAAoB;AAC/D,QAAM,UAAU,YAAY,IAAI;AAChC,QAAM,OAAiB;AAAA,IACrB,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,KAAK,IAAI;AAAA,EACtB;AACA,QAAM,MAAM,KAAK,IAAI;AAErB,MAAI,QAAQ,cAAc,SAAS,OAAO,WAAW,aAAa;AAChE,eAAW,MAAM,OAAO,KAAK,EAAE,GAAG,QAAQ,SAAS;AAAA,EACrD;AACF;AAEO,SAAS,OAAO,IAAY;AACjC,QAAM,IAAI,MAAM,MAAM,UAAU,CAAC,MAAM,EAAE,OAAO,EAAE;AAClD,MAAI,MAAM,GAAI,OAAM,MAAM,OAAO,GAAG,CAAC;AACvC;AAEO,SAAS,QAAQ;AACtB,QAAM,MAAM,OAAO,GAAG,MAAM,MAAM,MAAM;AAC1C;AAEO,SAAS,YAAY,MAAmB;AAC7C,QAAM,UAAU,EAAE,GAAG,MAAM,SAAS,GAAG,KAAK;AAC9C;AAEO,IAAM,MAAM;AAAA,EACjB,SAAS,CAAC,OAAe,SAAuB,KAAK,WAAW,OAAO,IAAI;AAAA,EAC3E,OAAO,CAAC,OAAe,SAAuB,KAAK,SAAS,OAAO,IAAI;AAAA,EACvE,SAAS,CAAC,OAAe,SAAuB,KAAK,WAAW,OAAO,IAAI;AAAA,EAC3E,MAAM,CAAC,OAAe,SAAuB,KAAK,QAAQ,OAAO,IAAI;AAAA,EAErE,SAAS,CAAC,SAAsB,YAAY,IAAI;AAAA,EAChD;AAAA,EACA;AAAA,EACA,kBAAkB,MAAM,MAAM,MAAM,MAAM;AAC5C;;;AClDA,IAAO,iBAAQ;AAAA,EACb,QAAQ,KAAU;AAChB,QAAI,OAAO,iBAAiB,UAAU;AACtC,QAAI,OAAO,WAAW,aAAa;AAEjC,aAAO,SAAS;AAAA,IAClB;AAAA,EACF;AACF;;;;AChBA,SAAS,UAAU,WAAW;A;;;ACA9B,IAAO,wBAAQ,CAAC,KAAK,UAAU;AAC7B,QAAM,SAAS,IAAI,aAAa;AAChC,aAAW,CAAC,KAAK,GAAG,KAAK,OAAO;AAC9B,WAAO,GAAG,IAAI;AAAA,EAChB;AACA,SAAO;AACT;;;;;;;ADFA,UAAM,WAAW,IAAI,KAAA;AAErB,QAAI,OAAO,WAAW,aAAa;AACjC,eAAS,QAAQ;;AAGnB,UAAM,SAAS,SAAA,MAAiD;AAC9D,YAAM,MAAwC;QAC5C,YAAY,CAAA;QACZ,cAAc,CAAA;QACd,aAAa,CAAA;QACb,eAAe,CAAA;QACf,iBAAiB,CAAA;QACjB,gBAAgB,CAAA;;AAElB,iBAAW,KAAK,MAAM,MAAO,KAAI,EAAE,QAAQ,QAAA,EAAU,KAAK,CAAA;AAC1D,aAAO;;;;;;;;;;;;;;;;;mBAwBI,OAAM,gBAAA;mBACH,OAAM,cAAA;mBAST,OAAM,cAAA;;;SA7BD,OAAA,YAAA,WAAA,GAAhB,aAkCW,WAAA;;IAlCe,IAAG;yBAC3B;IAgCkB;IAAA;IAAA,YA/BO,OAAA,QAAA,CAAf,OAAO,QAAG;2BADpB,aAgCkB,kBAAA;QA9Bf,KAAK;QACN,KAAI;QACJ,MAAK;QACL,OAAM;QACL,iBAAe;;gCAGI,EAAA,WAAA,IAAA,GADpB;UAuBU;UAAA;UAAA,YAtBI,OAAA,CAAL,MAAC;iCADV,oBAuBU,WAAA;cArBP,KAAK,EAAE;cACR,OAAK,gBAAA,CAAC,SAAO,CAAA,SACgB,EAAE,IAAA,IAAA,EAAA,oBAAwC,EAAE,QAAQ,YAAY,EAAE,QAAQ,cAAS,MAAA,CAAA,CAAA,CAAA;cAI/G,iBAAe;;cAEhB,oBAEM,OAFN,YAEM,CADJ;gBAA8C;gBAA9C;gBAA8C,iBAAjB,EAAE,KAAA;gBAAK;;eAAA,CAAA;cAI9B,EAAE,QAAQ,YAAY,EAAE,QAAQ,cAAS,SAAA,WAAA,GADjD;gBAIO;gBAAA;;kBAFL,OAAM;kBACL,OAAK,gBAAA,EAAA,oBAAwB,EAAE,QAAQ,aAAS,KAAA,KAAA,CAAA;;;;;;cAGnD,oBAEM,OAFN,YAEM,CADJ,oBAAwF,UAAA;gBAAhF,MAAK;gBAAU,SAAA,CAAK,WAAE,OAAA,OAAO,EAAE,EAAA;gBAAK,cAAW;iBAAuB,KAAC,GAAA,UAAA,CAAA,CAAA;;;;;;;;;;;;;;;;AElDzF,IAAO,gBAAQ;","names":[]}

package/dist/style.css

@@ -0,0 +1,230 @@
+@import "https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";
+
+/* src/styles/style.css */
+:root {
+  --toast-info: #385bbb;
+  --toast-info-rgb:
+    56,
+    91,
+    187;
+  --toast-info-darker: hsl(224, 54%, 35%);
+  --toast-warning: #f3950d;
+  --toast-warning-rgb:
+    243,
+    149,
+    13;
+  --toast-warning-darker: hsl(35, 91%, 40%);
+  --toast-error: #d32f2f;
+  --toast-error-rgb:
+    211,
+    47,
+    47;
+  --toast-error-darker: hsl(0, 68%, 43%);
+  --toast-success: #388e3c;
+  --toast-success-rgb:
+    56,
+    142,
+    60;
+  --toast-success-darker: hsl(120, 54%, 35%);
+}
+@keyframes toastSlideFromTop {
+  0% {
+    opacity: 0;
+    translate: 0 calc(-100% - 24px);
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes toastSlideFromBottom {
+  0% {
+    opacity: 0;
+    translate: 0 calc(100% + 24px);
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes toastFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes progressBar {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+.toast-list {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  pointer-events: none;
+  z-index: 99999;
+  width: max-content;
+  max-width: calc(100vw - 48px);
+}
+.toast-list > * {
+  pointer-events: auto;
+}
+.toast-list[data-position^=top] {
+  top: 24px;
+}
+.toast-list[data-position^=bottom] {
+  bottom: 24px;
+}
+.toast-list[data-position$=left] {
+  left: 24px;
+  right: auto;
+  transform: none;
+  align-items: flex-start;
+}
+.toast-list[data-position$=center] {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.toast-list[data-position$=right] {
+  right: 24px;
+  left: auto;
+  transform: none;
+  align-items: flex-end;
+}
+.toast {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  padding-right: 50px;
+  min-width: 280px;
+  max-width: 400px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  font-family:
+    "Nunito Sans",
+    system-ui,
+    helvetica,
+    sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  box-shadow:
+    0 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  color: var(--toast-info-darker);
+  background-clip: padding-box;
+}
+.toast-list[data-position^=top] .toast {
+  animation: toastSlideFromTop 0.5s ease-out forwards;
+}
+.toast-list[data-position^=bottom] .toast {
+  animation: toastSlideFromBottom 0.5s ease-out forwards;
+}
+.toast.toast-success {
+  color: var(--toast-success);
+  border-color: var(--toast-success);
+}
+.toast.toast-error {
+  color: var(--toast-error);
+  border-color: var(--toast-error);
+}
+.toast.toast-warning {
+  color: var(--toast-warning);
+  border-color: var(--toast-warning);
+}
+.toast.toast-info {
+  color: var(--toast-info);
+  border-color: var(--toast-info);
+}
+.toast-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.toast-title {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.4;
+}
+.toast-progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  border-radius: 50px;
+  transform-origin: left;
+  background-color: currentColor;
+  animation: progressBar linear forwards;
+}
+.toast-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.toast-close button {
+  padding: 8px;
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  color: inherit;
+  font-size: 16px;
+  line-height: 1;
+}
+.toast-close button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+.toast-close button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.toast-enter-active,
+.toast-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+}
+.toast-list[data-position^=top] .toast-enter-from,
+.toast-list[data-position^=top] .toast-leave-to {
+  transform: translateY(-16px);
+}
+.toast-list[data-position^=bottom] .toast-enter-from,
+.toast-list[data-position^=bottom] .toast-leave-to {
+  transform: translateY(16px);
+}
+.toast-move {
+  transition: transform 0.2s ease;
+}
+@media (max-width: 480px) {
+  .toast {
+    min-width: calc(100vw - 48px);
+    max-width: calc(100vw - 48px);
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@rayhanbapari/vue-toastr",
+  "version": "0.1.0",
+  "description": "Elegant toast notifications for Vue 3, inspired by Toastr.",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup --config tsup.config.ts && node scripts/copy-css.js",
+    "typecheck": "vue-tsc --noEmit",
+    "dev": "vite --config playground/vite.config.ts"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "license": "MIT",
+  "author": "Rayhan Bapari <mdrayhanbapari02@gmail.com>",
+  "keywords": [
+    "vue3",
+    "toast",
+    "notification",
+    "plugin",
+    "vue-toastr"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rayhan-bapari/vue-toastr"
+  },
+  "devDependencies": {
+    "@types/node": "^24.9.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3",
+    "unplugin-vue": "^7.0.3",
+    "vite": "^7.1.12"
+  }
+}