@samline/notify 0.3.0 → 1.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Samuel Olvera (samline)
+Copyright (c) 2023 Aaryan Arora (hiaaryan)
+
+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,208 +1,194 @@
-
 # Notify
 
-A universal toast notification library powered by Sileo, designed to bring the same beautiful, animated experience to React, Vue, Svelte, and Vanilla JS. Built for teams who need Sileo’s quality and API, but require seamless integration across multiple frameworks.
+A toast notification library designed to bring a beautiful animated experience to React, Vue, Svelte, and Vanilla JS.
+
+---
 
-Powered by Sileo — see the original project: https://github.com/hiaaryan/sileo
+Inspired by Sileo: [https://github.com/hiaaryan/sileo](https://github.com/hiaaryan/sileo)
 
-Table of Contents
+---
 
-- Installation
-- Entry Points
-- Quick Start
-- Documentation Guides
-- Shared API Summary
-- Shared Options
-- Notes
-- License
+## Table of Contents
 
-Installation
+- [Installation](#installation)
+- [CDN / Browser](#cdn--browser)
+- [Entrypoints](#entrypoints)
+- [Quick Start](#quick-start)
+- [What can you do?](#what-can-you-do)
+- [General API](#general-api)
+- [Minimal Example](#minimal-example)
+- [Framework Documentation](#framework-documentation)
+- [License](#license)
 
-Choose the installer that matches your environment.
+---
 
-npm
+## Installation
 
 ```bash
 npm install @samline/notify
 ```
 
-pnpm
+---
 
-```bash
-pnpm add @samline/notify
-```
+## CDN / Browser
 
-yarn
+Include the CSS and UMD bundle via unpkg or jsDelivr:
 
-```bash
-yarn add @samline/notify
+```html
+<!-- unpkg -->
+<link rel="stylesheet" href="https://unpkg.com/@samline/notify@1.0.1/dist/styles.css" />
+<script src="https://unpkg.com/@samline/notify@1.0.1/dist/browser-notify.js"></script>
 ```
 
-bun
-
-```bash
-bun add @samline/notify
+```html
+<!-- jsDelivr -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@samline/notify@1.0.1/dist/styles.css" />
+<script src="https://cdn.jsdelivr.net/npm/@samline/notify@1.0.1/dist/browser-notify.js"></script>
 ```
 
-CDN / Browser
-
-Use the browser build when your project loads scripts directly and cannot compile npm modules (Shopify, WordPress, plain HTML). Example CDN usage (replace version):
-
-
 ```html
-<script src="https://unpkg.com/@samline/notify@0.3.0/dist/notify.umd.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.3.0/dist/styles.css" />
-
 <script>
-  // Always use an array of strings as the second argument
-  // Correct usage:
-  const api = window.notify || window.notifications;
-  api.initToasters(document.body, ['top-left']);
-  api.notify({
-    title: 'Saved',
-    description: 'Changes saved',
-    type: 'success'
-    // You can omit position if you only initialized one position
-  });
+  window.notify.show({
+    title: 'Hello from the browser',
+    type: 'success',
+    duration: 2000,
+  })
 </script>
 ```
 
+---
 
-> ⚠️ **Important:**
-> - The second argument to `initToasters` **must be an array of strings** with the positions (e.g. `['top-left']`).
-> - **Do not use** `document.body['top-left']` (this is `undefined` and will not work).
-> - If you initialize only one position, toasts without an explicit position will go there automatically (dynamic fallback).
-> - If you initialize multiple positions, toasts without an explicit position will go to `'top-right'` by default.
+## Entrypoints
 
-Entry Points
+| Entrypoint                         | Description                   |
+| ---------------------------------- | ----------------------------- |
+| @samline/notify                    | VanillaJS API                 |
+| @samline/notify/react              | React API (hooks and helpers) |
+| @samline/notify/vue                | Vue API (composable)          |
+| @samline/notify/svelte             | Svelte API (store)            |
+| @samline/notify/dist/browser-notify | Global for Browser/CDN      |
 
-Choose the entrypoint matching your stack so you only import what you need.
+---
 
-| Use case      | Import                                                                                                                                        | Guide                              |
-| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
-| Vanilla JS    | `import { notify, initToasters } from '@samline/notify/vanilla'`                                                                              | [docs/vanilla.md](docs/vanilla.md) |
-| Browser / CDN | `<script src="https://unpkg.com/@samline/notify@0.2.3/dist/notify.umd.js"></script>`<br/>`const api = window.notify; api.initToasters(...);` | [docs/browser.md](docs/browser.md) |
-| React         | `import { Toaster, notify } from '@samline/notify/react'`                                                                                      | [docs/react.md](docs/react.md)     |
-| Vue           | `import { Toaster, notify } from '@samline/notify/vue'`                                                                                        | [docs/vue.md](docs/vue.md)         |
-| Svelte        | `import Toaster, { notify } from '@samline/notify/svelte'`                                                                                     | [docs/svelte.md](docs/svelte.md)   |
+## Quick Start
 
-Documentation Guides
+### Import by framework
 
-- Vanilla: [docs/vanilla.md](docs/vanilla.md)
-- Browser/CDN: [docs/browser.md](docs/browser.md)
-- React: [docs/react.md](docs/react.md)
-- Vue: [docs/vue.md](docs/vue.md)
-- Svelte: [docs/svelte.md](docs/svelte.md)
+**VanillaJS (default):**
 
-Shared API Summary
+```js
+import { showNotifyToast, onNotifyToastsChange } from '@samline/notify'
 
-The package exposes a framework-agnostic core controller (`notify`) with the following shape (a `sileo` alias is provided for compatibility). Use `notify` as the primary API in examples and code.
+// Subscribe first — the library manages state, rendering is up to you
+onNotifyToastsChange((toasts) => { /* render toasts in your DOM */ })
 
-```ts
-// core controller
-notify.show(options)
-notify.success(options)
-notify.error(options)
-notify.info(options)
-notify.warning(options)
-notify.action(options)
-notify.promise(promise, messages)
-notify.dismiss(id)
-notify.clear()
+showNotifyToast({ title: 'Hello world!', type: 'success' })
 ```
 
-When using the UMD/browser bundle the global is exposed as `window.notify` (preferred). For compatibility the API object also exposes `window.notifications` which maintains the previous shape.
-
+**React:**
 
+```js
+import { showNotifyToast } from '@samline/notify/react'
+showNotifyToast({ title: 'Hello from React!', type: 'success' })
+```
 
-Shared Options (All Entrypoints)
-
-All notification methods accept a rich set of options for full customization. **Position fallback note:**
+**Vue:**
 
-- If you initialize only one position with `initToasters`, toasts without an explicit `position` will go there (dynamic fallback).
-- If you initialize multiple positions, the fallback will be `'top-right'`.
-- If you notify to a position that was not initialized, a warning will appear in the console and the toast will not be shown. This warning is now always triggered, incluso si la posición no existe en el DOM.
+```js
+import { showNotifyToast, useNotifyToasts } from '@samline/notify/vue'
+showNotifyToast({ title: 'Hello from Vue!', type: 'success' })
+```
 
-Example:
+**Svelte:**
 
 ```js
-// Only one position (dynamic fallback)
-api.initToasters(document.body, ['bottom-left']);
-api.notify({ title: 'Will go to bottom-left' });
-
-// Multiple positions (classic fallback)
-api.initToasters(document.body, ['top-right', 'bottom-left']);
-api.notify({ title: 'Will go to top-right' });
-api.notify({ title: 'Will go to bottom-left', position: 'bottom-left' });
+import { showNotifyToast, notifyToasts } from '@samline/notify/svelte'
+showNotifyToast({ title: 'Hello from Svelte!', type: 'success' })
 ```
 
+Each framework imports from its own context, ensuring optimal integration and correct types. See the specific documentation for advanced examples.
+
+For complete examples and plug-and-play UI, see your framework's documentation:
+
+- [React](docs/react.md)
+- [Vue 3](docs/vue.md)
+- [Svelte](docs/svelte.md)
+- [VanillaJS](docs/vanillajs.md)
+- [Browser / CDN](docs/browser.md)
+
 ---
 
-All options:
+## What can you do?
 
-| Property      | Type                                   | Default     | Description                                 |
-| ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
-| `title`       | string                                 | —           | Toast title                                 |
-| `description` | string \| ReactNode \| SvelteNode      | —           | Optional body text (JSX, HTML, or string)   |
-| `type`        | `info\|success\|error\|warning\|action`| `info`      | Visual intent                               |
-| `position`    | string                                 | `top-right` | One of toast positions                      |
-| `duration`    | number \| null                         | `4000`      | Auto-dismiss timeout in ms (null = sticky)  |
-| `button`      | { title: string, onClick: () => void } | —           | Optional action button                      |
-| `icon`        | string \| ReactNode \| SvelteNode      | —           | Custom icon (SVG, JSX, or node)             |
-| `fill`        | string                                 | —           | Custom background color (SVG or badge)      |
-| `styles`      | { title, description, badge, button }  | —           | Custom class overrides for sub-elements     |
-| `roundness`   | number                                 | 16          | Border radius in pixels                     |
-| `autopilot`   | boolean \| object                      | true        | Auto expand/collapse timing                 |
+- Show toasts with physics-based, customizable animations
+- Use the same API in React, Vue, Svelte, VanillaJS, and Browser
+- Customize position, duration, styles, icons, and buttons
+- Integrate plug-and-play UI or create your own rendering
+- Subscribe to toast changes (store/composable/callback)
+- Use from bundlers or directly in HTML
 
-#### Example: Advanced Toast
+---
 
-```js
-notify.success({
-  title: "Styled!",
-  fill: "#222",
-  icon: '<svg>...</svg>',
-  styles: {
-    title: "text-white!",
-    badge: "bg-white/20!",
-    button: "bg-white/10!"
-  },
-  roundness: 24,
-  autopilot: false
-});
-```
+## General API
 
-#### SileoPromiseOptions
+Notify exposes a unified API for all environments. All options and methods are available in each integration.
 
-The `promise` method supports advanced flows:
+### Toast Options
 
-```js
-notify.promise(fetchData(), {
-  loading: { title: "Loading..." },
-  success: (data) => ({ title: `Loaded ${data.name}` }),
-  error: (err) => ({ title: "Error", description: err.message }),
-  action: (data) => ({ title: "Action required", button: { title: "Retry", onClick: () => retry() } })
-});
-```
+| Option      | Type                                                                                  | Description                  |
+| ----------- | ------------------------------------------------------------------------------------- | ---------------------------- |
+| title       | string                                                                                | Toast title                  |
+| description | string                                                                                | Optional description         |
+| type        | 'success'\|'loading'\|'error'\|'warning'\|'info'\|'action'                            | Toast type                   |
+| duration    | number                                                                                | Duration in milliseconds     |
+| position    | 'top-left'\|'top-center'\|'top-right'\|'bottom-left'\|'bottom-center'\|'bottom-right' | Screen position              |
+| styles      | { title, description, badge, button }                                                 | Custom CSS classes           |
+| fill        | string                                                                                | Background color             |
+| roundness   | number                                                                                | Border radius                |
+| autopilot   | boolean\|{ expand, collapse }                                                         | Auto expand/collapse control |
+| button      | { title: string, onClick: () => void }                                                | Action button                |
 
-#### Toaster Component Props (React, Svelte, Vue, Vanilla)
+### Main Methods
 
-All Toaster components accept the following props for global control:
+- `showNotifyToast(options)` — Show a toast (in all environments)
+- `onNotifyToastsChange(fn)` — Subscribe to changes (VanillaJS)
+- `useNotifyToasts()` — Vue composable
+- `notifyToasts` — Svelte store
 
-| Prop      | Type                                      | Default      | Description                                 |
-| --------- | ----------------------------------------- | ------------ | ------------------------------------------- |
-| `position`| string                                    | top-right    | Default toast position                      |
-| `offset`  | number \| string \| {top,right,bottom,left}| 0            | Distance from viewport edges                |
-| `options` | Partial<Options>                          | —            | Default options for all toasts              |
-| `theme`   | "light" \| "dark" \| "system"            | system       | Color scheme (auto, light, dark)            |
+---
 
-See framework-specific guides for more examples.
+## Minimal Example
 
-Notes
+```js
+showNotifyToast({
+  title: 'Action required',
+  description: 'Click the button to continue',
+  type: 'action',
+  button: {
+    title: 'Continue',
+    onClick: () => alert('You continued!'),
+  },
+  styles: {
+    title: 'my-title',
+    button: 'my-button',
+  },
+  fill: '#fffae0',
+  roundness: 24,
+  duration: 5000,
+})
+```
+
+## Framework Documentation
 
-- Accessibility: toasters use `role="status"` and `aria-live="polite"` by default. Respect `prefers-reduced-motion` in your UI.
-- The package includes a UMD browser bundle for projects without a build step.
-- Motion runtime is optional for module builds; UMD consumers should include the provided `dist/styles.css` for visuals.
+- [React](docs/react.md)
+- [Vue 3](docs/vue.md)
+- [Svelte](docs/svelte.md)
+- [VanillaJS](docs/vanillajs.md)
+- [Browser / CDN](docs/browser.md)
+- [General API](docs/api.md)
+
+---
 
-License
+## License
 
 MIT

package/dist/browser-notify.js

@@ -0,0 +1,68 @@
+(() => {
+  // src/core/notify-core.ts
+  class NotifyCore {
+    toasts = [];
+    listeners = new Set;
+    position = "top-right";
+    options = undefined;
+    idCounter = 0;
+    generateId() {
+      return `${++this.idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    }
+    subscribe(fn) {
+      this.listeners.add(fn);
+      fn(this.toasts);
+      return () => this.listeners.delete(fn);
+    }
+    emit() {
+      for (const fn of this.listeners)
+        fn(this.toasts);
+    }
+    update(fn) {
+      this.toasts = fn(this.toasts);
+      this.emit();
+    }
+    dismiss(id) {
+      const item = this.toasts.find((t) => t.id === id);
+      if (!item || item.exiting)
+        return;
+      this.update((prev) => prev.map((t) => t.id === id ? { ...t, exiting: true } : t));
+      setTimeout(() => this.update((prev) => prev.filter((t) => t.id !== id)), 600);
+    }
+    show(opts) {
+      const id = opts.title ? `notify-${opts.title}` : "notify-default";
+      const prevItem = this.toasts.find((t) => t.id === id);
+      const instanceId = prevItem?.instanceId ?? this.generateId();
+      const state = opts.type ?? prevItem?.type ?? "success";
+      const item = {
+        ...prevItem,
+        ...opts,
+        id,
+        instanceId,
+        type: state
+      };
+      this.update((prev) => {
+        const filtered = prev.filter((t) => t.id !== id);
+        return [...filtered, item];
+      });
+      return id;
+    }
+    getToasts() {
+      return this.toasts;
+    }
+  }
+  var notifyCore = new NotifyCore;
+
+  // src/browser-notify.js
+  var notifyApi = {
+    show: (options) => notifyCore.show(options),
+    dismiss: (id) => notifyCore.dismiss(id),
+    clear: () => {
+      for (const toast of notifyCore.getToasts()) {
+        notifyCore.dismiss(toast.id);
+      }
+    },
+    subscribe: (listener) => notifyCore.subscribe(listener)
+  };
+  window.notify = notifyApi;
+})();

package/dist/cc-2Yt7NqMX.mjs

@@ -0,0 +1,21 @@
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+function _extends() {
+    _extends = Object.assign || function assign(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+export { _extends as _ };

package/dist/cc-B6peeNak.mjs

@@ -0,0 +1,33 @@
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+function _extends() {
+    _extends = Object.assign || function assign(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+export { _extends as _, _object_without_properties_loose as a };

package/dist/cc-BWuAzFJ6.js

@@ -0,0 +1,12 @@
+function _extends() {
+    _extends = Object.assign || function assign(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+exports._extends = _extends;

package/dist/cc-CaBHsjUt.js

@@ -0,0 +1,34 @@
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+function _extends() {
+    _extends = Object.assign || function assign(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+exports._extends = _extends;
+exports._object_without_properties_loose = _object_without_properties_loose;

package/dist/cc-DGff5sSY.js

@@ -0,0 +1,21 @@
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+function _extends() {
+    _extends = Object.assign || function assign(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+exports._extends = _extends;

package/dist/cc-he3fHS3P.mjs

@@ -0,0 +1,12 @@
+function _extends() {
+    _extends = Object.assign || function assign(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+export { _extends as _ };

package/dist/notify.d.mts

@@ -0,0 +1,44 @@
+type NotifyState = "success" | "loading" | "error" | "warning" | "info" | "action";
+interface NotifyStyles {
+    title?: string;
+    description?: string;
+    badge?: string;
+    button?: string;
+}
+interface NotifyButton {
+    title: string;
+    onClick: () => void;
+}
+declare const NOTIFY_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+type NotifyPosition = (typeof NOTIFY_POSITIONS)[number];
+interface NotifyOptions {
+    title?: string;
+    description?: string;
+    type?: NotifyState;
+    position?: NotifyPosition;
+    duration?: number | null;
+    icon?: any;
+    styles?: NotifyStyles;
+    fill?: string;
+    roundness?: number;
+    autopilot?: boolean | {
+        expand?: number;
+        collapse?: number;
+    };
+    button?: NotifyButton;
+}
+
+interface NotifyItem extends NotifyOptions {
+    id: string;
+    instanceId: string;
+    exiting?: boolean;
+    autoExpandDelayMs?: number;
+    autoCollapseDelayMs?: number;
+}
+
+declare function showNotifyToast(options: NotifyOptions): string;
+declare function onNotifyToastsChange(fn: (toasts: NotifyItem[]) => void): () => void;
+
+export { onNotifyToastsChange, showNotifyToast };
+export type { NotifyButton, NotifyOptions, NotifyPosition, NotifyState, NotifyStyles };
+//# sourceMappingURL=notify.d.mts.map

package/dist/notify.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notify.d.mts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vanilla-notify.ts"],"mappings":"AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACPA,iBAAiB,eAAe,UAAU,aAAa;AACvD,iBAAiB,oBAAoB,cAAc,UAAU;;;;","names":[]}