@samline/notify 0.1.10 → 0.2.0

package/README.md

@@ -1,7 +1,9 @@
+
 ## @samline/notify
-A Sileo-inspired notifications engine providing a framework-agnostic core and lightweight adapters for Vanilla JS, React, Vue and Svelte.
 
-Inspired by Sileo — see the original project: https://github.com/hiaaryan/sileo
+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.
+
+Powered by Sileo — see the original project: https://github.com/hiaaryan/sileo
 
 Table of Contents
 
@@ -47,36 +49,30 @@ 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.1.10/dist/notify.umd.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.10/dist/styles.css">
+<script src="https://unpkg.com/@samline/notify@0.1.15/dist/notify.umd.js"></script>
+<link
+  rel="stylesheet" 
+  href="https://unpkg.com/@samline/notify@0.1.15/dist/styles.css"
+/>
+
+<script>
+  const api = window.notify || window.notifications
+  api.initToasters(document.body, ['top-right'])
+  api.notify({ title: 'Saved', description: 'Changes saved', type: 'success' })
+</script>
 ```
 
 Entry Points
 
 Choose the entrypoint matching your stack so you only import what you need.
 
-| Use case | Import | Guide |
-| --- | --- | --- |
-| Vanilla JS | `import { default as notifications } from '@samline/notify'` | [docs/vanilla.md](docs/vanilla.md) |
-| Vanilla explicit subpath | `import { sileo } from '@samline/notify/vanilla'` | [docs/vanilla.md](docs/vanilla.md) |
-| Browser / CDN | `<script src="https://unpkg.com/@samline/notify@0.1.9/dist/notify.umd.js"></script>` | [docs/browser.md](docs/browser.md) |
-| React | `import { Toaster } from '@samline/notify/react'` | [docs/react.md](docs/react.md) |
-| Vue | `import Notifications from '@samline/notify/vue'` | [docs/vue.md](docs/vue.md) |
-| Svelte | `import Toaster from '@samline/notify/svelte'` | [docs/svelte.md](docs/svelte.md) |
-
-Quick Start
-
-Vanilla example (UMD / modules):
-
-```html
-<script src="https://unpkg.com/@samline/notify@0.1.10/dist/notify.umd.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.10/dist/styles.css">
-<script>
-  const api = window.notify || window.notifications;
-  api.initToasters(document.body, ['top-right']);
-  api.notify({ title: 'Saved', description: 'Changes saved', type: 'success' });
-</script>
-```
+| 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.1.13/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)   |
 
 Documentation Guides
 
@@ -105,18 +101,67 @@ notify.clear()
 
 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.
 
-Shared Options
 
-Common `options` across entrypoints:
+Shared Options (All Entrypoints)
+
+All notification methods accept a rich set of options for full customization:
+
+| 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                 |
+
+#### 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
+});
+```
+
+#### SileoPromiseOptions
+
+The `promise` method supports advanced flows:
+
+```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() } })
+});
+```
+
+#### Toaster Component Props (React, Svelte, Vue, Vanilla)
+
+All Toaster components accept the following props for global control:
 
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `title` | string | — | Toast title |
-| `description` | string | — | Optional body text |
-| `type` | `info\|success\|error\|warning` | `info` | Visual intent |
-| `position` | string | `top-right` | One of toast positions |
-| `duration` | number | `4000` | Auto-dismiss timeout in ms (0 = persistent) |
-| `button` | { title: string, onClick: () => void } | — | Optional action button |
+| 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.
 
 Notes
 
@@ -127,4 +172,3 @@ Notes
 License
 
 MIT
-

package/dist/index.cjs.js

@@ -24,8 +24,21 @@ class NotifyController {
         return this.toasts.slice();
     }
     show(opts) {
+        // Normalizar props avanzadas
+        const { icon, fill, styles, roundness, autopilot, ...rest } = opts;
         const id = this.nextId();
-        const item = { id, options: { ...opts }, createdAt: Date.now() };
+        const item = {
+            id,
+            options: {
+                ...rest,
+                ...(icon !== undefined ? { icon } : {}),
+                ...(fill !== undefined ? { fill } : {}),
+                ...(styles !== undefined ? { styles } : {}),
+                ...(roundness !== undefined ? { roundness } : {}),
+                ...(autopilot !== undefined ? { autopilot } : {}),
+            },
+            createdAt: Date.now(),
+        };
         this.toasts.push(item);
         this.notify();
         return id;
@@ -65,6 +78,13 @@ class NotifyController {
         const loadingId = this.show({ ...(opts.loading || {}), type: 'loading', position: opts.position });
         p.then((res) => {
             this.dismiss(loadingId);
+            if (opts.action) {
+                const actionOpt = typeof opts.action === 'function' ? opts.action(res) : opts.action;
+                if (actionOpt) {
+                    this.show({ ...(actionOpt || {}), type: 'action', position: opts.position });
+                    return;
+                }
+            }
             const successOpt = typeof opts.success === 'function' ? opts.success(res) : opts.success;
             if (successOpt)
                 this.show({ ...(successOpt || {}), type: 'success', position: opts.position });
@@ -1006,12 +1026,30 @@ const POSITIONS = [
     'bottom-center',
     'bottom-right'
 ];
-function createContainer(position, root) {
+function createContainer(position, root, opts) {
     const c = document.createElement('div');
     c.className = 'sileo-toaster';
     c.setAttribute('data-position', position);
     c.setAttribute('role', 'status');
     c.setAttribute('aria-live', 'polite');
+    if (opts === null || opts === void 0 ? void 0 : opts.theme)
+        c.setAttribute('data-theme', opts.theme);
+    // offset
+    if ((opts === null || opts === void 0 ? void 0 : opts.offset) !== undefined) {
+        if (typeof opts.offset === 'number' || typeof opts.offset === 'string') {
+            c.style.margin = typeof opts.offset === 'number' ? `${opts.offset}px` : opts.offset;
+        }
+        else if (typeof opts.offset === 'object') {
+            if (opts.offset.top !== undefined)
+                c.style.marginTop = `${opts.offset.top}px`;
+            if (opts.offset.right !== undefined)
+                c.style.marginRight = `${opts.offset.right}px`;
+            if (opts.offset.bottom !== undefined)
+                c.style.marginBottom = `${opts.offset.bottom}px`;
+            if (opts.offset.left !== undefined)
+                c.style.marginLeft = `${opts.offset.left}px`;
+        }
+    }
     return c;
 }
 function renderToast(item) {
@@ -1065,13 +1103,17 @@ function renderToast(item) {
     }
     return el;
 }
-function initToasters(root = document.body, positions = ['top-right']) {
+function initToasters(root = document.body, positions = ['top-right'], opts) {
     const containers = {};
     positions.forEach((pos) => {
-        const c = createContainer(pos);
+        const c = createContainer(pos, root, opts);
         root.appendChild(c);
         containers[pos] = c;
     });
+    if (opts === null || opts === void 0 ? void 0 : opts.options)
+        window.sileo._globalOptions = opts.options;
+    if (opts === null || opts === void 0 ? void 0 : opts.theme)
+        window.sileo._theme = opts.theme;
     function rerender(items) {
         positions.forEach((pos) => {
             const container = containers[pos];

package/dist/index.esm.js

@@ -20,8 +20,21 @@ class NotifyController {
         return this.toasts.slice();
     }
     show(opts) {
+        // Normalizar props avanzadas
+        const { icon, fill, styles, roundness, autopilot, ...rest } = opts;
         const id = this.nextId();
-        const item = { id, options: { ...opts }, createdAt: Date.now() };
+        const item = {
+            id,
+            options: {
+                ...rest,
+                ...(icon !== undefined ? { icon } : {}),
+                ...(fill !== undefined ? { fill } : {}),
+                ...(styles !== undefined ? { styles } : {}),
+                ...(roundness !== undefined ? { roundness } : {}),
+                ...(autopilot !== undefined ? { autopilot } : {}),
+            },
+            createdAt: Date.now(),
+        };
         this.toasts.push(item);
         this.notify();
         return id;
@@ -61,6 +74,13 @@ class NotifyController {
         const loadingId = this.show({ ...(opts.loading || {}), type: 'loading', position: opts.position });
         p.then((res) => {
             this.dismiss(loadingId);
+            if (opts.action) {
+                const actionOpt = typeof opts.action === 'function' ? opts.action(res) : opts.action;
+                if (actionOpt) {
+                    this.show({ ...(actionOpt || {}), type: 'action', position: opts.position });
+                    return;
+                }
+            }
             const successOpt = typeof opts.success === 'function' ? opts.success(res) : opts.success;
             if (successOpt)
                 this.show({ ...(successOpt || {}), type: 'success', position: opts.position });
@@ -1002,12 +1022,30 @@ const POSITIONS = [
     'bottom-center',
     'bottom-right'
 ];
-function createContainer(position, root) {
+function createContainer(position, root, opts) {
     const c = document.createElement('div');
     c.className = 'sileo-toaster';
     c.setAttribute('data-position', position);
     c.setAttribute('role', 'status');
     c.setAttribute('aria-live', 'polite');
+    if (opts === null || opts === void 0 ? void 0 : opts.theme)
+        c.setAttribute('data-theme', opts.theme);
+    // offset
+    if ((opts === null || opts === void 0 ? void 0 : opts.offset) !== undefined) {
+        if (typeof opts.offset === 'number' || typeof opts.offset === 'string') {
+            c.style.margin = typeof opts.offset === 'number' ? `${opts.offset}px` : opts.offset;
+        }
+        else if (typeof opts.offset === 'object') {
+            if (opts.offset.top !== undefined)
+                c.style.marginTop = `${opts.offset.top}px`;
+            if (opts.offset.right !== undefined)
+                c.style.marginRight = `${opts.offset.right}px`;
+            if (opts.offset.bottom !== undefined)
+                c.style.marginBottom = `${opts.offset.bottom}px`;
+            if (opts.offset.left !== undefined)
+                c.style.marginLeft = `${opts.offset.left}px`;
+        }
+    }
     return c;
 }
 function renderToast(item) {
@@ -1061,13 +1099,17 @@ function renderToast(item) {
     }
     return el;
 }
-function initToasters(root = document.body, positions = ['top-right']) {
+function initToasters(root = document.body, positions = ['top-right'], opts) {
     const containers = {};
     positions.forEach((pos) => {
-        const c = createContainer(pos);
+        const c = createContainer(pos, root, opts);
         root.appendChild(c);
         containers[pos] = c;
     });
+    if (opts === null || opts === void 0 ? void 0 : opts.options)
+        window.sileo._globalOptions = opts.options;
+    if (opts === null || opts === void 0 ? void 0 : opts.theme)
+        window.sileo._theme = opts.theme;
     function rerender(items) {
         positions.forEach((pos) => {
             const container = containers[pos];

package/dist/notify.umd.js

@@ -26,8 +26,21 @@
             return this.toasts.slice();
         }
         show(opts) {
+            // Normalizar props avanzadas
+            const { icon, fill, styles, roundness, autopilot, ...rest } = opts;
             const id = this.nextId();
-            const item = { id, options: { ...opts }, createdAt: Date.now() };
+            const item = {
+                id,
+                options: {
+                    ...rest,
+                    ...(icon !== undefined ? { icon } : {}),
+                    ...(fill !== undefined ? { fill } : {}),
+                    ...(styles !== undefined ? { styles } : {}),
+                    ...(roundness !== undefined ? { roundness } : {}),
+                    ...(autopilot !== undefined ? { autopilot } : {}),
+                },
+                createdAt: Date.now(),
+            };
             this.toasts.push(item);
             this.notify();
             return id;
@@ -67,6 +80,13 @@
             const loadingId = this.show({ ...(opts.loading || {}), type: 'loading', position: opts.position });
             p.then((res) => {
                 this.dismiss(loadingId);
+                if (opts.action) {
+                    const actionOpt = typeof opts.action === 'function' ? opts.action(res) : opts.action;
+                    if (actionOpt) {
+                        this.show({ ...(actionOpt || {}), type: 'action', position: opts.position });
+                        return;
+                    }
+                }
                 const successOpt = typeof opts.success === 'function' ? opts.success(res) : opts.success;
                 if (successOpt)
                     this.show({ ...(successOpt || {}), type: 'success', position: opts.position });
@@ -1008,12 +1028,30 @@
         'bottom-center',
         'bottom-right'
     ];
-    function createContainer(position, root) {
+    function createContainer(position, root, opts) {
         const c = document.createElement('div');
         c.className = 'sileo-toaster';
         c.setAttribute('data-position', position);
         c.setAttribute('role', 'status');
         c.setAttribute('aria-live', 'polite');
+        if (opts === null || opts === void 0 ? void 0 : opts.theme)
+            c.setAttribute('data-theme', opts.theme);
+        // offset
+        if ((opts === null || opts === void 0 ? void 0 : opts.offset) !== undefined) {
+            if (typeof opts.offset === 'number' || typeof opts.offset === 'string') {
+                c.style.margin = typeof opts.offset === 'number' ? `${opts.offset}px` : opts.offset;
+            }
+            else if (typeof opts.offset === 'object') {
+                if (opts.offset.top !== undefined)
+                    c.style.marginTop = `${opts.offset.top}px`;
+                if (opts.offset.right !== undefined)
+                    c.style.marginRight = `${opts.offset.right}px`;
+                if (opts.offset.bottom !== undefined)
+                    c.style.marginBottom = `${opts.offset.bottom}px`;
+                if (opts.offset.left !== undefined)
+                    c.style.marginLeft = `${opts.offset.left}px`;
+            }
+        }
         return c;
     }
     function renderToast(item) {
@@ -1067,13 +1105,17 @@
         }
         return el;
     }
-    function initToasters(root = document.body, positions = ['top-right']) {
+    function initToasters(root = document.body, positions = ['top-right'], opts) {
         const containers = {};
         positions.forEach((pos) => {
-            const c = createContainer(pos);
+            const c = createContainer(pos, root, opts);
             root.appendChild(c);
             containers[pos] = c;
         });
+        if (opts === null || opts === void 0 ? void 0 : opts.options)
+            window.sileo._globalOptions = opts.options;
+        if (opts === null || opts === void 0 ? void 0 : opts.theme)
+            window.sileo._theme = opts.theme;
         function rerender(items) {
             positions.forEach((pos) => {
                 const container = containers[pos];

package/docs/browser.md

@@ -1,44 +1,79 @@
-# Browser (UMD / no-bundler)
 
-Quick start
+# Browser / CDN usage
 
-Include the UMD bundle and stylesheet in a static page:
+Use this package directly in the browser when you cannot use npm modules or a bundler (e.g. Shopify, WordPress, static HTML).
+
+## Quick start
+
+Add the stylesheet and UMD bundle to your HTML:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.9/dist/styles.css">
-<script src="https://unpkg.com/@samline/notify@0.1.9/dist/notify.umd.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.15/dist/styles.css">
+<script src="https://unpkg.com/@samline/notify@0.1.15/dist/notify.umd.js"></script>
 <script>
-  const api = window.notify || window.notifications;
-  api.initToasters(document.body, ['top-right']);
-  // convenience: api.notify
-  api.notify({ title: 'Hello', description: 'No-bundler usage', type: 'info' });
+  document.addEventListener('DOMContentLoaded', () => {
+    const api = window.notify; // or window.notifications for legacy
+    api.initToasters(document.body, ['top-right']);
+    api.notify({ title: 'Hello', description: 'No-bundler usage', type: 'info' });
+  });
 </script>
 ```
 
-Notes
 
-- The UMD bundle exposes `window.notify` (preferred). For compatibility it also exposes `window.notifications` with the previous API shape.
-- Make sure to load `dist/styles.css` for styles and animations.
+## API
 
-## CDN / Browser
+- The UMD bundle exposes `window.notify` (recommended) and `window.notifications` (legacy/compatibility).
+- Always include `dist/styles.css` for correct appearance and animations.
+- Use `api.initToasters(container, positions, { offset, options, theme })` to mount containers (usually `document.body`).
+- Use `api.notify({...})` to show a notification.
 
-Use the browser build when your project loads scripts directly in the page and cannot compile npm modules (Shopify, WordPress, plain HTML templates).
+### Advanced Options
 
-Example using the UMD build (replace path/version as needed):
+All notification methods accept advanced options:
 
-```html
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.1.9/dist/styles.css">
-<script src="https://unpkg.com/@samline/notify@0.1.9/dist/notify.umd.js"></script>
-<script>
-  document.addEventListener('DOMContentLoaded', () => {
-    const api = window.notify || window.notifications;
-    api.initToasters(document.body, ['top-right']);
-    api.notify({ title: 'Hello', description: 'No-bundler usage', type: 'info' });
-  });
-</script>
+| Property      | Type                                   | Default     | Description                                 |
+| ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
+| `title`       | string                                 | —           | Toast title                                 |
+| `description` | string                                 | —           | Optional body text (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                                 | —           | Custom icon (SVG or HTML)                   |
+| `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                 |
+
+#### Example: Advanced Toast
+
+```js
+api.success({
+  title: "Styled!",
+  fill: "#222",
+  icon: '<svg>...</svg>',
+  styles: {
+    title: "text-white!",
+    badge: "bg-white/20!",
+    button: "bg-white/10!"
+  },
+  roundness: 24,
+  autopilot: false
+});
+```
+
+### Toaster Options
+
+You can pass advanced options to `initToasters`:
+
+```js
+api.initToasters(document.body, ['top-right'], {
+  offset: { top: 32, right: 16 },
+  options: { fill: '#222', roundness: 20 },
+  theme: 'dark'
+});
 ```
 
-### Notes
+## Notes
 
-The browser bundle exposes `window.notify` (preferred) and for compatibility also exposes `window.notifications`; if these globals conflict with other scripts use the module builds instead.
-Include `dist/styles.css` for styles and animations when using the UMD/browser bundle.
+- If you need more control or want to avoid global variables, use the ESM/CJS builds with a bundler.