@samline/notify 1.0.2 → 2.0.0

package/{LICENSE → LICENSE.md}

@@ -1,7 +1,7 @@
 MIT License
 
-Copyright (c) 2026 Samuel Olvera (samline)
-Copyright (c) 2023 Aaryan Arora (hiaaryan)
+Copyright (c) 2026 Samuel Olvera (Samline)
+Copyright (c) 2023 Emil Kowalski
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,196 +1,60 @@
 # Notify
 
-A toast notification library designed to bring a beautiful animated experience to React, Vue, Svelte, and Vanilla JS.
+A universal toast notification library. Built for teams who need Sonner quality and API, but require seamless integration across multiple frameworks.
 
----
-
-Inspired by Sileo: [https://github.com/hiaaryan/sileo](https://github.com/hiaaryan/sileo)
-
----
+Notify is a toast package inspired by [Sonner](https://github.com/emilkowalski/sonner). The intention is to complement that work and experiment with a shared runtime for React, Vue, Svelte, vanilla JS, and browser/CDN usage.
 
 ## Table of Contents
 
 - [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)
+- [Documentation](#documentation)
+- [Scripts](#scripts)
 - [License](#license)
 
----
-
 ## Installation
 
 ```bash
 npm install @samline/notify
 ```
 
----
-
-## CDN / Browser
-
-Include the CSS and UMD bundle via unpkg or jsDelivr:
-
-```html
-<!-- unpkg -->
-<link rel="stylesheet" href="https://unpkg.com/@samline/notify@1.0.2/dist/styles.css" />
-<script src="https://unpkg.com/@samline/notify@1.0.2/dist/browser-notify.js"></script>
-<script src="https://unpkg.com/@samline/notify@1.0.2/dist/render-notify-toasts.js"></script>
-```
-
-```html
-<!-- jsDelivr -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@samline/notify@1.0.2/dist/styles.css" />
-<script src="https://cdn.jsdelivr.net/npm/@samline/notify@1.0.2/dist/browser-notify.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@samline/notify@1.0.2/dist/render-notify-toasts.js"></script>
-```
-
-```html
-<script>
-  renderNotifyToasts({ position: 'top-right' })
-  window.notify.show({
-    title: 'Hello from the browser',
-    type: 'success',
-    duration: 2000,
-  })
-</script>
+```bash
+bun add @samline/notify
 ```
 
----
-
 ## Entrypoints
 
-| 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      |
-
----
+| Entrypoint                   | Use                   |
+| ---------------------------- | --------------------- |
+| `@samline/notify`            | Main vanilla API      |
+| `@samline/notify/browser`    | Browser global bundle |
+| `@samline/notify/react`      | React adapter         |
+| `@samline/notify/vue`        | Vue adapter           |
+| `@samline/notify/svelte`     | Svelte adapter        |
+| `@samline/notify/styles.css` | Shared styles export  |
 
 ## Quick Start
 
-### Import by framework
+```ts
+import { createToaster, toast } from '@samline/notify';
 
-**VanillaJS (default):**
-
-```js
-import { showNotifyToast, onNotifyToastsChange } from '@samline/notify'
-
-// Subscribe first — the library manages state, rendering is up to you
-onNotifyToastsChange((toasts) => { /* render toasts in your DOM */ })
-
-showNotifyToast({ title: 'Hello world!', type: 'success' })
-```
-
-**React:**
-
-```js
-import { showNotifyToast } from '@samline/notify/react'
-showNotifyToast({ title: 'Hello from React!', type: 'success' })
-```
-
-**Vue:**
-
-```js
-import { showNotifyToast, useNotifyToasts } from '@samline/notify/vue'
-showNotifyToast({ title: 'Hello from Vue!', type: 'success' })
-```
-
-**Svelte:**
-
-```js
-import { showNotifyToast, notifyToasts } from '@samline/notify/svelte'
-showNotifyToast({ title: 'Hello from Svelte!', type: 'success' })
-```
+createToaster({ position: 'bottom-right', richColors: true });
 
-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)
-
----
-
-## What can you do?
-
-- 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
-
----
-
-## General API
-
-Notify exposes a unified API for all environments. All options and methods are available in each integration.
-
-### Toast Options
-
-| 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                |
-
-### Main Methods
-
-- `showNotifyToast(options)` — Show a toast (in all environments)
-- `onNotifyToastsChange(fn)` — Subscribe to changes (VanillaJS)
-- `useNotifyToasts()` — Vue composable
-- `notifyToasts` — Svelte store
-
----
-
-## Minimal Example
-
-```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,
-})
+toast.success('Saved');
 ```
 
-## Framework Documentation
+## Documentation
 
-- [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)
+Use the dedicated docs when you want the full API or a framework-specific guide.
 
----
+- [docs/README.md](docs/README.md)
+- [docs/api.md](docs/api.md)
+- [docs/vanilla.md](docs/vanilla.md)
+- [docs/browser.md](docs/browser.md)
+- [docs/react.md](docs/react.md)
+- [docs/vue.md](docs/vue.md)
+- [docs/svelte.md](docs/svelte.md)
 
 ## License
 

package/dist/_runtime.d.mts

@@ -0,0 +1,87 @@
+import React from 'react';
+
+interface ToastClassnames {
+    toast?: string;
+    title?: string;
+    description?: string;
+    loader?: string;
+    closeButton?: string;
+    cancelButton?: string;
+    actionButton?: string;
+    success?: string;
+    error?: string;
+    info?: string;
+    warning?: string;
+    loading?: string;
+    default?: string;
+    content?: string;
+    icon?: string;
+}
+interface ToastIcons {
+    success?: React.ReactNode;
+    info?: React.ReactNode;
+    warning?: React.ReactNode;
+    error?: React.ReactNode;
+    loading?: React.ReactNode;
+    close?: React.ReactNode;
+}
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+interface ToastOptions {
+    className?: string;
+    closeButton?: boolean;
+    descriptionClassName?: string;
+    style?: React.CSSProperties;
+    cancelButtonStyle?: React.CSSProperties;
+    actionButtonStyle?: React.CSSProperties;
+    duration?: number;
+    unstyled?: boolean;
+    classNames?: ToastClassnames;
+    closeButtonAriaLabel?: string;
+    toasterId?: string;
+}
+type Offset = {
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+    left?: string | number;
+} | string | number;
+interface ToasterProps {
+    id?: string;
+    invert?: boolean;
+    theme?: 'light' | 'dark' | 'system';
+    position?: Position;
+    hotkey?: string[];
+    richColors?: boolean;
+    expand?: boolean;
+    duration?: number;
+    gap?: number;
+    visibleToasts?: number;
+    closeButton?: boolean;
+    toastOptions?: ToastOptions;
+    className?: string;
+    style?: React.CSSProperties;
+    offset?: Offset;
+    mobileOffset?: Offset;
+    dir?: 'rtl' | 'ltr' | 'auto';
+    swipeDirections?: SwipeDirection[];
+    icons?: ToastIcons;
+    customAriaLabel?: string;
+    containerAriaLabel?: string;
+}
+type SwipeDirection = 'top' | 'right' | 'bottom' | 'left';
+
+declare const VISIBLE_TOASTS_AMOUNT = 3;
+declare const VIEWPORT_OFFSET = "24px";
+declare const MOBILE_VIEWPORT_OFFSET = "16px";
+declare const TOAST_LIFETIME = 4000;
+declare const TOAST_WIDTH = 356;
+declare const GAP = 14;
+declare const SWIPE_THRESHOLD = 45;
+declare const TIME_BEFORE_UNMOUNT = 200;
+declare function cn(...classes: Array<string | undefined>): string;
+declare function canUseDOM(): boolean;
+declare function getDefaultSwipeDirections(position: string): Array<SwipeDirection>;
+declare function getDocumentDirection(): ToasterProps['dir'];
+declare function assignOffset(defaultOffset: ToasterProps['offset'], mobileOffset: ToasterProps['mobileOffset']): React.CSSProperties;
+
+export { GAP, MOBILE_VIEWPORT_OFFSET, SWIPE_THRESHOLD, TIME_BEFORE_UNMOUNT, TOAST_LIFETIME, TOAST_WIDTH, VIEWPORT_OFFSET, VISIBLE_TOASTS_AMOUNT, assignOffset, canUseDOM, cn, getDefaultSwipeDirections, getDocumentDirection };

package/dist/_runtime.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+
+interface ToastClassnames {
+    toast?: string;
+    title?: string;
+    description?: string;
+    loader?: string;
+    closeButton?: string;
+    cancelButton?: string;
+    actionButton?: string;
+    success?: string;
+    error?: string;
+    info?: string;
+    warning?: string;
+    loading?: string;
+    default?: string;
+    content?: string;
+    icon?: string;
+}
+interface ToastIcons {
+    success?: React.ReactNode;
+    info?: React.ReactNode;
+    warning?: React.ReactNode;
+    error?: React.ReactNode;
+    loading?: React.ReactNode;
+    close?: React.ReactNode;
+}
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+interface ToastOptions {
+    className?: string;
+    closeButton?: boolean;
+    descriptionClassName?: string;
+    style?: React.CSSProperties;
+    cancelButtonStyle?: React.CSSProperties;
+    actionButtonStyle?: React.CSSProperties;
+    duration?: number;
+    unstyled?: boolean;
+    classNames?: ToastClassnames;
+    closeButtonAriaLabel?: string;
+    toasterId?: string;
+}
+type Offset = {
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+    left?: string | number;
+} | string | number;
+interface ToasterProps {
+    id?: string;
+    invert?: boolean;
+    theme?: 'light' | 'dark' | 'system';
+    position?: Position;
+    hotkey?: string[];
+    richColors?: boolean;
+    expand?: boolean;
+    duration?: number;
+    gap?: number;
+    visibleToasts?: number;
+    closeButton?: boolean;
+    toastOptions?: ToastOptions;
+    className?: string;
+    style?: React.CSSProperties;
+    offset?: Offset;
+    mobileOffset?: Offset;
+    dir?: 'rtl' | 'ltr' | 'auto';
+    swipeDirections?: SwipeDirection[];
+    icons?: ToastIcons;
+    customAriaLabel?: string;
+    containerAriaLabel?: string;
+}
+type SwipeDirection = 'top' | 'right' | 'bottom' | 'left';
+
+declare const VISIBLE_TOASTS_AMOUNT = 3;
+declare const VIEWPORT_OFFSET = "24px";
+declare const MOBILE_VIEWPORT_OFFSET = "16px";
+declare const TOAST_LIFETIME = 4000;
+declare const TOAST_WIDTH = 356;
+declare const GAP = 14;
+declare const SWIPE_THRESHOLD = 45;
+declare const TIME_BEFORE_UNMOUNT = 200;
+declare function cn(...classes: Array<string | undefined>): string;
+declare function canUseDOM(): boolean;
+declare function getDefaultSwipeDirections(position: string): Array<SwipeDirection>;
+declare function getDocumentDirection(): ToasterProps['dir'];
+declare function assignOffset(defaultOffset: ToasterProps['offset'], mobileOffset: ToasterProps['mobileOffset']): React.CSSProperties;
+
+export { GAP, MOBILE_VIEWPORT_OFFSET, SWIPE_THRESHOLD, TIME_BEFORE_UNMOUNT, TOAST_LIFETIME, TOAST_WIDTH, VIEWPORT_OFFSET, VISIBLE_TOASTS_AMOUNT, assignOffset, canUseDOM, cn, getDefaultSwipeDirections, getDocumentDirection };

package/dist/_runtime.js

@@ -0,0 +1,97 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// Visible toasts amount
+const VISIBLE_TOASTS_AMOUNT = 3;
+// Viewport padding
+const VIEWPORT_OFFSET = '24px';
+// Mobile viewport padding
+const MOBILE_VIEWPORT_OFFSET = '16px';
+// Default lifetime of a toasts (in ms)
+const TOAST_LIFETIME = 4000;
+// Default toast width
+const TOAST_WIDTH = 356;
+// Default gap between toasts
+const GAP = 14;
+// Threshold to dismiss a toast
+const SWIPE_THRESHOLD = 45;
+// Equal to exit animation duration
+const TIME_BEFORE_UNMOUNT = 200;
+function cn(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+function canUseDOM() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+function getDefaultSwipeDirections(position) {
+    const [y, x] = position.split('-');
+    const directions = [];
+    if (y) {
+        directions.push(y);
+    }
+    if (x) {
+        directions.push(x);
+    }
+    return directions;
+}
+function getDocumentDirection() {
+    if (!canUseDOM()) return 'ltr';
+    const dirAttribute = document.documentElement.getAttribute('dir');
+    if (dirAttribute === 'auto' || !dirAttribute) {
+        return window.getComputedStyle(document.documentElement).direction;
+    }
+    return dirAttribute;
+}
+function assignOffset(defaultOffset, mobileOffset) {
+    const styles = {};
+    [
+        defaultOffset,
+        mobileOffset
+    ].forEach((offset, index)=>{
+        const isMobile = index === 1;
+        const prefix = isMobile ? '--mobile-offset' : '--offset';
+        const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
+        function assignAll(value) {
+            [
+                'top',
+                'right',
+                'bottom',
+                'left'
+            ].forEach((key)=>{
+                styles[`${prefix}-${key}`] = typeof value === 'number' ? `${value}px` : value;
+            });
+        }
+        if (typeof offset === 'number' || typeof offset === 'string') {
+            assignAll(offset);
+        } else if (typeof offset === 'object') {
+            [
+                'top',
+                'right',
+                'bottom',
+                'left'
+            ].forEach((key)=>{
+                if (offset[key] === undefined) {
+                    styles[`${prefix}-${key}`] = defaultValue;
+                } else {
+                    styles[`${prefix}-${key}`] = typeof offset[key] === 'number' ? `${offset[key]}px` : offset[key];
+                }
+            });
+        } else {
+            assignAll(defaultValue);
+        }
+    });
+    return styles;
+}
+
+exports.GAP = GAP;
+exports.MOBILE_VIEWPORT_OFFSET = MOBILE_VIEWPORT_OFFSET;
+exports.SWIPE_THRESHOLD = SWIPE_THRESHOLD;
+exports.TIME_BEFORE_UNMOUNT = TIME_BEFORE_UNMOUNT;
+exports.TOAST_LIFETIME = TOAST_LIFETIME;
+exports.TOAST_WIDTH = TOAST_WIDTH;
+exports.VIEWPORT_OFFSET = VIEWPORT_OFFSET;
+exports.VISIBLE_TOASTS_AMOUNT = VISIBLE_TOASTS_AMOUNT;
+exports.assignOffset = assignOffset;
+exports.canUseDOM = canUseDOM;
+exports.cn = cn;
+exports.getDefaultSwipeDirections = getDefaultSwipeDirections;
+exports.getDocumentDirection = getDocumentDirection;

package/dist/_runtime.mjs

@@ -0,0 +1,83 @@
+// Visible toasts amount
+const VISIBLE_TOASTS_AMOUNT = 3;
+// Viewport padding
+const VIEWPORT_OFFSET = '24px';
+// Mobile viewport padding
+const MOBILE_VIEWPORT_OFFSET = '16px';
+// Default lifetime of a toasts (in ms)
+const TOAST_LIFETIME = 4000;
+// Default toast width
+const TOAST_WIDTH = 356;
+// Default gap between toasts
+const GAP = 14;
+// Threshold to dismiss a toast
+const SWIPE_THRESHOLD = 45;
+// Equal to exit animation duration
+const TIME_BEFORE_UNMOUNT = 200;
+function cn(...classes) {
+    return classes.filter(Boolean).join(' ');
+}
+function canUseDOM() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+function getDefaultSwipeDirections(position) {
+    const [y, x] = position.split('-');
+    const directions = [];
+    if (y) {
+        directions.push(y);
+    }
+    if (x) {
+        directions.push(x);
+    }
+    return directions;
+}
+function getDocumentDirection() {
+    if (!canUseDOM()) return 'ltr';
+    const dirAttribute = document.documentElement.getAttribute('dir');
+    if (dirAttribute === 'auto' || !dirAttribute) {
+        return window.getComputedStyle(document.documentElement).direction;
+    }
+    return dirAttribute;
+}
+function assignOffset(defaultOffset, mobileOffset) {
+    const styles = {};
+    [
+        defaultOffset,
+        mobileOffset
+    ].forEach((offset, index)=>{
+        const isMobile = index === 1;
+        const prefix = isMobile ? '--mobile-offset' : '--offset';
+        const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
+        function assignAll(value) {
+            [
+                'top',
+                'right',
+                'bottom',
+                'left'
+            ].forEach((key)=>{
+                styles[`${prefix}-${key}`] = typeof value === 'number' ? `${value}px` : value;
+            });
+        }
+        if (typeof offset === 'number' || typeof offset === 'string') {
+            assignAll(offset);
+        } else if (typeof offset === 'object') {
+            [
+                'top',
+                'right',
+                'bottom',
+                'left'
+            ].forEach((key)=>{
+                if (offset[key] === undefined) {
+                    styles[`${prefix}-${key}`] = defaultValue;
+                } else {
+                    styles[`${prefix}-${key}`] = typeof offset[key] === 'number' ? `${offset[key]}px` : offset[key];
+                }
+            });
+        } else {
+            assignAll(defaultValue);
+        }
+    });
+    return styles;
+}
+
+export { GAP, MOBILE_VIEWPORT_OFFSET, SWIPE_THRESHOLD, TIME_BEFORE_UNMOUNT, TOAST_LIFETIME, TOAST_WIDTH, VIEWPORT_OFFSET, VISIBLE_TOASTS_AMOUNT, assignOffset, canUseDOM, cn, getDefaultSwipeDirections, getDocumentDirection };