vue-toasts-lite 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 scheron
+
+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

@@ -1,45 +1,157 @@
-# vue-toasts-lite
+# Vue Toasts Lite
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+A lightweight toast notifications library for Vue 3.
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+## Features
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+- 🚀 Lightweight and easy to use
+- 🎨 Multiple toast types (success, error, loading, warn)
+- 📍 Multiple positions (can show in different corners simultaneously)
+- ⚡️ Customizable duration, auto-close, and styling
+- 🎯 TypeScript support
+- 🎯 Promise support
+- 🖱️ Pause on hover
 
-## Purpose
+## Installation
 
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `vue-toasts-lite`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
+```bash
+npm install vue-toasts-lite
+```
+
+## Quick Start
+
+**Three steps to start using toasts:**
+
+1. Install the package
+2. Add `ToastsLiteProvider` to your app
+3. Call `toasts.success()` from anywhere
 
-## What is OIDC Trusted Publishing?
+### 1. Add the provider to your `App.vue`:
 
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
+```vue
+<script setup>
+import { ToastsLiteProvider } from 'vue-toasts-lite'
+import 'vue-toasts-lite/style.css'
+</script>
 
-## Setup Instructions
+<template>
+  <div>
+    <RouterView />
+    <ToastsLiteProvider />
+  </div>
+</template>
+```
 
-To properly configure OIDC trusted publishing for this package:
+### 2. Use anywhere in your app:
 
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+```vue
+<script setup>
+import { toasts } from 'vue-toasts-lite'
+
+toasts.success('Hello!')
+toasts.error('Something went wrong')
+toasts.loading('Loading...')
+toasts.warn('Warning message')
+</script>
+```
+
+## API
+
+```js
+// Basic methods
+toasts.success(message, options?)
+toasts.error(message, options?)
+toasts.loading(message, options?)
+toasts.warn(message, options?)
+
+// Advanced methods
+toasts.add(options)              // Create custom toast
+toasts.update(id, options)       // Update existing toast
+toasts.remove(id?)               // Remove toast(s)
+toasts.clear()                   // Clear all toasts
+toasts.promise(promise, options) // Handle promise states
+```
+
+## Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `message` | `string` | - | Message to display |
+| `type` | `'success' \| 'error' \| 'loading' \| 'warn'` | `'success'` | Toast type |
+| `duration` | `number` | `3000` | Duration in milliseconds |
+| `autoClose` | `boolean` | `true` | Auto-close behavior |
+| `position` | `ToastPosition` | `'top-center'` | Toast position |
+| `id` | `string` | auto | Custom ID |
+
+### Available Positions
+
+`top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`, `middle-center`
+
+## Examples
+
+### Basic Usage
+
+```js
+// With options
+toasts.success('Success!', { duration: 5000, position: 'bottom-right' })
+
+// Multiple positions at once
+toasts.success('Top', { position: 'top-center' })
+toasts.error('Bottom', { position: 'bottom-right' })
+```
+
+### Update Toasts
+
+```js
+const id = toasts.loading('Uploading...')
+// Later
+toasts.update(id, { type: 'success', message: 'Done!' })
+```
+
+### Promise Support
+
+```js
+await toasts.promise(
+  fetchData(),
+  {
+    loading: 'Loading...',
+    success: 'Loaded!',
+    error: 'Failed!'
+  }
+)
+```
+
+### Custom Controller
+
+```js
+import { ToastsController } from 'vue-toasts-lite'
+
+const notifications = new ToastsController()
+notifications.success('Hello!')
+```
+
+## Styling
+
+Customize colors and appearance with CSS variables:
+
+### CSS Variables
+
+```css
+:root {
+  --tl-font-family: system-ui, -apple-system, sans-serif;
+  --tl-bg: hsl(0, 0%, 100%);
+  --tl-text: hsl(0, 0%, 20%);
+  --tl-border: hsl(0, 0%, 85%);
+  --tl-shadow: hsla(0, 0%, 0%, 0.1);
+  --tl-success: hsl(145, 63%, 42%);
+  --tl-error: hsl(0, 79%, 63%);
+  --tl-warn: hsl(45, 100%, 51%);
+  --tl-icon-color: hsl(0, 0%, 100%);
+  --tl-loading-border: hsl(0, 0%, 15%);
+  --tl-loading-bg: hsl(0, 0%, 98%);
+}
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,124 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+
+export declare type Id = string;
+
+export declare interface Toast {
+    add: (options: ToastOptions) => Id;
+    update: (id: Id, options: ToastOptions) => Id;
+    success: (message: string, options?: ToastSimpleOptions) => Id;
+    loading: (message: string, options?: ToastSimpleOptions) => Id;
+    error: (message: string, options?: ToastSimpleOptions) => Id;
+    warn: (message: string, options?: ToastSimpleOptions) => Id;
+    promise: <T>(promise: Promise<T>, options: ToastPromiseOptions) => Promise<Id>;
+    remove: (id?: Id) => void;
+    clear: () => void;
+    onToastsListChange: (callback: (toasts: ToastProps[]) => void) => () => void;
+}
+
+export declare type ToastOptions = Partial<ToastProps>;
+
+export declare type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "middle-center";
+
+export declare type ToastPromiseOptions = {
+    loading: string;
+    success: string;
+    error: string;
+    position?: ToastPosition;
+    id?: Id;
+};
+
+export declare type ToastProps = {
+    /** toast id */
+    id: Id;
+    /** toast type */
+    type: ToastType;
+    /** toast message */
+    message: string;
+    /** auto close the toast */
+    autoClose: boolean;
+    /** duration in milliseconds */
+    duration: number;
+    /** Position of the toast on the screen. */
+    position?: ToastPosition;
+};
+
+export declare const toasts: ToastsController;
+
+export declare class ToastsController implements Toast {
+    private counter;
+    private toasts;
+    constructor();
+    get toastList(): ToastProps[];
+    onToastsListChange(callback: (toasts: ToastProps[]) => void): () => void;
+    private ID;
+    private addOrUpdate;
+    /**
+     * Add a toast
+     * @param options - The options for the toast
+     * @returns The id of the toast
+     */
+    add(options: ToastOptions): string;
+    /**
+     * Update a toast by id
+     * @param id - The id of the toast to update
+     * @param options - The options for the toast
+     * @returns The id of the toast
+     */
+    update(id: Id, options: ToastOptions): string;
+    /**
+     * Remove a toast by id
+     * If no id is provided, all current toasts will be removed
+     * @param id - The id of the toast to remove
+     */
+    remove(id?: Id): void;
+    /**
+     * Remove all current toasts
+     */
+    clear(): void;
+    /**
+     * Add a success toast
+     * @param message - The message to display in the toast
+     * @param options - The options for the toast
+     * @returns The id of the toast
+     */
+    success(message: string, options?: Omit<ToastSimpleOptions, "type">): string;
+    /**
+     * Add an error toast
+     * @param message - The message to display in the toast
+     * @param options - The options for the toast
+     * @returns The id of the toast
+     */
+    error(message: string, options?: Omit<ToastSimpleOptions, "type">): string;
+    /**
+     * Add a warning toast
+     * @param message - The message to display in the toast
+     * @param options - The options for the toast
+     * @returns The id of the toast
+     */
+    warn(message: string, options?: Omit<ToastSimpleOptions, "type">): string;
+    /**
+     * Add a loading toast
+     * @param message - The message to display in the toast
+     * @param options - The options for the toast
+     * @returns The id of the toast
+     */
+    loading(message: string, options?: Omit<ToastSimpleOptions, "type">): string;
+    /**
+     * Add a promise toast
+     * @param promise - The promise to display in the toast
+     * @param options - The options for the toast
+     * @returns The id of the toast
+     */
+    promise<T>(promise: Promise<T>, options: ToastPromiseOptions): Promise<string>;
+}
+
+export declare type ToastSimpleOptions = Partial<Omit<ToastProps, "message">>;
+
+export declare const ToastsLiteProvider: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare type ToastType = "success" | "loading" | "error" | "warn";
+
+export { }

package/dist/index.js

@@ -0,0 +1,246 @@
+var M = Object.defineProperty;
+var O = (a, t, e) => t in a ? M(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var v = (a, t, e) => O(a, typeof t != "symbol" ? t + "" : t, e);
+import { defineComponent as C, ref as h, watchEffect as E, createElementBlock as f, openBlock as c, withModifiers as $, normalizeStyle as U, createCommentVNode as k, createElementVNode as _, normalizeClass as L, toDisplayString as D, computed as g, onBeforeUpdate as x, createBlock as b, Teleport as B, Fragment as T, renderList as w, createVNode as A, TransitionGroup as I, withCtx as N, unref as P } from "vue";
+const S = {
+  key: 0,
+  class: "toasts-lite__icon"
+}, V = { class: "toasts-lite__content" }, z = { class: "toasts-lite__content-message" }, F = /* @__PURE__ */ C({
+  __name: "ToastsLiteItem",
+  props: {
+    id: {},
+    type: {},
+    message: {},
+    autoClose: { type: Boolean },
+    duration: {},
+    position: {}
+  },
+  emits: ["close"],
+  setup(a, { expose: t, emit: e }) {
+    const o = a, n = e, l = h(null), p = h(0), d = h(0);
+    function s() {
+      l.value && clearTimeout(l.value), n("close");
+    }
+    function r() {
+      l.value && (clearTimeout(l.value), l.value = null, d.value = o.duration - (Date.now() - p.value));
+    }
+    function i() {
+      !l.value && d.value > 0 && (l.value = setTimeout(s, d.value));
+    }
+    return E(() => {
+      o.autoClose && (p.value = Date.now(), d.value = o.duration, l.value = setTimeout(s, o.duration));
+    }), t({
+      pause: r,
+      resume: i
+    }), (u, m) => (c(), f("div", {
+      class: "toasts-lite__toast",
+      style: U(`--toast-duration: ${a.duration}s;`),
+      onClick: $(s, ["prevent"])
+    }, [
+      ["success", "error", "loading", "warn"].includes(a.type) ? (c(), f("div", S, [
+        _("div", {
+          class: L(`toasts-lite__${a.type}`)
+        }, null, 2)
+      ])) : k("", !0),
+      _("div", V, [
+        _("div", z, D(a.message), 1)
+      ])
+    ], 4));
+  }
+});
+class R extends Map {
+  constructor() {
+    super(...arguments);
+    v(this, "subscribers", []);
+  }
+  set(e, o) {
+    return super.set(e, o), this.notify(), this;
+  }
+  delete(e) {
+    const o = super.delete(e);
+    return this.notify(), o;
+  }
+  clear() {
+    super.clear(), this.notify();
+  }
+  subscribe(e) {
+    return this.subscribers.push(e), () => {
+      this.subscribers = this.subscribers.filter((o) => o !== e);
+    };
+  }
+  notify() {
+    this.subscribers.forEach((e) => e(Array.from(this.values())));
+  }
+}
+const j = {
+  type: "success",
+  message: "Hello from Toasts Lite",
+  autoClose: !0,
+  duration: 3e3,
+  position: "top-center"
+};
+class G {
+  constructor() {
+    v(this, "counter", 0);
+    v(this, "toasts");
+    this.toasts = new R();
+  }
+  get toastList() {
+    return Array.from(this.toasts.values());
+  }
+  onToastsListChange(t) {
+    return this.toasts.subscribe(t);
+  }
+  ID() {
+    return `toast:${Date.now().toString(16)}-${this.counter++}`;
+  }
+  addOrUpdate(t) {
+    let { id: e = this.ID(), ...o } = t;
+    if (this.toasts.has(e)) {
+      const n = this.toasts.get(e);
+      return Object.assign(n, o), this.toasts.set(e, n), e;
+    }
+    return this.toasts.set(e, { id: e, ...j, ...o }), e;
+  }
+  /**
+   * Add a toast
+   * @param options - The options for the toast
+   * @returns The id of the toast
+   */
+  add(t) {
+    return this.addOrUpdate(t);
+  }
+  /**
+   * Update a toast by id
+   * @param id - The id of the toast to update
+   * @param options - The options for the toast
+   * @returns The id of the toast
+   */
+  update(t, e) {
+    return this.addOrUpdate({ ...e, id: t });
+  }
+  /**
+   * Remove a toast by id
+   * If no id is provided, all current toasts will be removed
+   * @param id - The id of the toast to remove
+   */
+  remove(t) {
+    t && !this.toasts.has(t) || (t ? this.toasts.delete(t) : this.clear());
+  }
+  /**
+   * Remove all current toasts
+   */
+  clear() {
+    this.toasts.clear();
+  }
+  /**
+   * Add a success toast
+   * @param message - The message to display in the toast
+   * @param options - The options for the toast
+   * @returns The id of the toast
+   */
+  success(t, e) {
+    return this.addOrUpdate({ ...e, message: t, type: "success" });
+  }
+  /**
+   * Add an error toast
+   * @param message - The message to display in the toast
+   * @param options - The options for the toast
+   * @returns The id of the toast
+   */
+  error(t, e) {
+    return this.addOrUpdate({ ...e, message: t, type: "error" });
+  }
+  /**
+   * Add a warning toast
+   * @param message - The message to display in the toast
+   * @param options - The options for the toast
+   * @returns The id of the toast
+   */
+  warn(t, e) {
+    return this.addOrUpdate({ ...e, message: t, type: "warn" });
+  }
+  /**
+   * Add a loading toast
+   * @param message - The message to display in the toast
+   * @param options - The options for the toast
+   * @returns The id of the toast
+   */
+  loading(t, e) {
+    return this.addOrUpdate({ ...e, message: t, type: "loading" });
+  }
+  /**
+   * Add a promise toast
+   * @param promise - The promise to display in the toast
+   * @param options - The options for the toast
+   * @returns The id of the toast
+   */
+  async promise(t, e) {
+    const o = this.loading(e.loading, { position: e.position, id: e.id });
+    try {
+      return await t, this.success(e.success, { position: e.position, id: o }), o;
+    } catch {
+      throw this.error(e.error, { position: e.position, id: o }), new Error(e.error);
+    }
+  }
+}
+const y = new G(), H = ["onMouseenter", "onMouseleave"], K = /* @__PURE__ */ C({
+  __name: "ToastsLiteProvider",
+  setup(a) {
+    const t = h(y.toastList);
+    y.onToastsListChange((s) => {
+      t.value = s;
+    });
+    const e = g(() => {
+      const s = /* @__PURE__ */ new Map();
+      return t.value.forEach((r) => {
+        const i = r.position || "top-center";
+        s.has(i) || s.set(i, []), s.get(i).push(r);
+      }), s;
+    }), o = g(() => Array.from(e.value.keys())), n = h({});
+    x(() => {
+      for (const s of o.value)
+        n.value[s] = [];
+    });
+    function l(s) {
+      n.value[s] && n.value[s].forEach((r) => r == null ? void 0 : r.pause());
+    }
+    function p(s) {
+      n.value[s] && n.value[s].forEach((r) => r == null ? void 0 : r.resume());
+    }
+    function d(s, r) {
+      n.value[s] || (n.value[s] = []), r && "pause" in r && "resume" in r && n.value[s].push(r);
+    }
+    return (s, r) => (c(), b(B, { to: "body" }, [
+      (c(!0), f(T, null, w(o.value, (i) => (c(), f("div", {
+        key: i,
+        class: L(["toasts-lite__toast-container", `toasts-lite__${i}`]),
+        onMouseenter: (u) => l(i),
+        onMouseleave: (u) => p(i)
+      }, [
+        A(I, { name: "toasts-lite" }, {
+          default: N(() => [
+            (c(!0), f(T, null, w(e.value.get(i), (u) => (c(), b(F, {
+              id: u.id,
+              ref_for: !0,
+              ref: (m) => d(i, m),
+              key: u.id,
+              type: u.type,
+              message: u.message,
+              "auto-close": u.autoClose,
+              duration: u.duration,
+              position: u.position,
+              onClose: (m) => P(y).remove(u.id)
+            }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "onClose"]))), 128))
+          ]),
+          _: 2
+        }, 1024)
+      ], 42, H))), 128))
+    ]));
+  }
+});
+export {
+  G as ToastsController,
+  K as ToastsLiteProvider,
+  y as toasts
+};

package/dist/style.css

@@ -0,0 +1 @@
+:root{--toasts-lite-font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);--toasts-lite-bg: var(--tl-bg, hsl(0, 0%, 100%));--toasts-lite-text: var(--tl-text, hsl(0, 0%, 20%));--toasts-lite-border: var(--tl-border, hsl(0, 0%, 85%));--toasts-lite-shadow: var(--tl-shadow, hsla(0, 0%, 0%, .1));--toasts-lite-success: var(--tl-success, hsl(145, 63%, 42%));--toasts-lite-error: var(--tl-error, hsl(0, 79%, 63%));--toasts-lite-warn: var(--tl-warn, hsl(45, 100%, 51%));--toasts-lite-icon-color: var(--tl-icon-color, hsl(0, 0%, 100%));--toasts-lite-loading-border-main: var(--tl-loading-border, hsl(0, 0%, 15%));--toasts-lite-loading-border-bg: var(--tl-loading-bg, hsl(0, 0%, 98%))}@keyframes scaleAnimation{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes loadingRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toasts-lite-enter-active,.toasts-lite-leave-active{transition:opacity .3s ease,transform .3s ease}.toasts-lite-enter-from,.toasts-lite-leave-to{opacity:0;transform:translateY(-10px)}.toasts-lite__toast-container{position:fixed;z-index:9999;margin:10px;overflow:visible;display:flex;flex-direction:column;align-items:center;padding-top:12px;gap:12px;pointer-events:none}.toasts-lite__toast{font-family:var(--toasts-lite-font-family);display:flex;justify-content:center;align-items:center;background:var(--toasts-lite-bg);color:var(--toasts-lite-text);border:1px solid var(--toasts-lite-border);box-shadow:var(--toasts-lite-shadow) 0 0 10px;min-width:100px;max-width:1200px;padding:10px 20px;border-radius:8px;cursor:pointer;pointer-events:auto;text-overflow:ellipsis}.toasts-lite__icon{margin-right:12px}.toasts-lite__top-left{top:0;left:0}.toasts-lite__top-center{top:0;left:50%;transform:translate(-50%);min-width:80vw}.toasts-lite__top-right{top:0;right:0}.toasts-lite__bottom-left{bottom:0;left:0}.toasts-lite__bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toasts-lite__bottom-right{bottom:0;right:0}.toasts-lite__middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}.toasts-lite__success{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-success);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__success:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__error{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-error);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__error:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__warn{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-warn);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__warn:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="5" stroke="currentColor" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="5" stroke="currentColor" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__loading{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toasts-lite-loading-border-main);border-right-color:var(--toasts-lite-loading-border-bg);animation:loadingRotate 1s linear infinite}

package/package.json

@@ -1,10 +1,42 @@
 {
   "name": "vue-toasts-lite",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for vue-toasts-lite",
-  "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
+  "version": "0.1.0",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "author": "scheron",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scheron/vue-toasts-lite"
+  },
+  "license": "MIT",
+  "description": "Lightweight toast notifications for Vue 3",
+  "keywords": [ "vue", "toast", "notification", "vue3" ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.8",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.0.0"
+  }
 }