@monetr/notify 1.0.0

package/dist/style.css

@@ -0,0 +1,351 @@
+:where([data-monetr-notifier-stack], [data-monetr-notification]) {
+  --monetr-notification-bg: #1c1c1ee0;
+  --monetr-notification-fg: #e8e8e8;
+  --monetr-notification-fg-muted: #e8e8e88c;
+  --monetr-notification-border: #ffffff14;
+  --monetr-notification-radius: 14px;
+  --monetr-notification-blur: 16px;
+  --monetr-notification-shadow: 0 4px 12px #0000001f, 0 1px 3px #0000000f;
+  --monetr-notification-success: #34d399;
+  --monetr-notification-error: #f87171;
+  --monetr-notification-warning: #fbbf24;
+  --monetr-notification-info: #60a5fa;
+  --monetr-notification-progress-track: #ffffff14;
+  --monetr-notification-z-index: 9999;
+  --monetr-notification-stack-edge-padding: 16px;
+  --monetr-notification-width: min(380px, calc(100vw - 32px));
+}
+
+[data-monetr-notifier-stack] {
+  z-index: var(--monetr-notification-z-index);
+  pointer-events: none;
+  width: var(--monetr-notification-width);
+  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+  position: fixed;
+}
+
+[data-monetr-notifier-stack][data-stack-anchor^="bottom-"] {
+  bottom: max(env(safe-area-inset-bottom, 0px), var(--monetr-notification-stack-edge-padding));
+}
+
+[data-monetr-notifier-stack][data-stack-anchor^="top-"] {
+  top: max(env(safe-area-inset-top, 0px), var(--monetr-notification-stack-edge-padding));
+}
+
+[data-monetr-notifier-stack][data-stack-anchor$="-left"] {
+  left: var(--monetr-notification-stack-edge-padding);
+}
+
+[data-monetr-notifier-stack][data-stack-anchor$="-right"] {
+  right: var(--monetr-notification-stack-edge-padding);
+}
+
+[data-monetr-notifier-stack][data-stack-anchor$="-center"] {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-monetr-notifier-stack][data-stack-empty="true"] {
+  display: none;
+}
+
+[data-monetr-notification] {
+  pointer-events: auto;
+  box-sizing: border-box;
+  background: var(--monetr-notification-bg);
+  width: 100%;
+  color: var(--monetr-notification-fg);
+  border: 1px solid var(--monetr-notification-border);
+  border-radius: var(--monetr-notification-radius);
+  box-shadow: var(--monetr-notification-shadow);
+  backdrop-filter: blur(var(--monetr-notification-blur));
+  -webkit-user-select: none;
+  user-select: none;
+  letter-spacing: -.01em;
+  touch-action: none;
+  --monetr-stack-index: 0;
+  --monetr-stack-offset: 8px;
+  --monetr-stack-scale: calc(1 - var(--monetr-stack-index) * .05);
+  --monetr-stack-direction: -1;
+  --monetr-drag-x: 0px;
+  --monetr-drag-y: 0px;
+  --monetr-entry-y: 0px;
+  --monetr-notification-progress: 0;
+  --monetr-notification-progress-bar: var(--monetr-notification-fg-muted);
+  transform: translate3d(var(--monetr-drag-x),
+      calc(var(--monetr-stack-index) * var(--monetr-stack-direction) * var(--monetr-stack-offset) +
+        var(--monetr-drag-y) +
+        var(--monetr-entry-y)),
+      0)
+    scale(var(--monetr-stack-scale));
+  z-index: calc(1000 - var(--monetr-stack-index));
+  opacity: 1;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px 14px 18px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.45;
+  transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), opacity .3s ease-out;
+  display: flex;
+  position: absolute;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+[data-monetr-notification][data-stack-index="0"] {
+  position: relative;
+}
+
+[data-monetr-notifier-stack][data-stack-anchor^="bottom-"] [data-monetr-notification] {
+  bottom: 0;
+}
+
+[data-monetr-notifier-stack][data-stack-anchor^="top-"] [data-monetr-notification] {
+  --monetr-stack-direction: 1;
+  top: 0;
+}
+
+[data-monetr-notification][data-stack-index="3"], [data-monetr-notification][data-stack-index="4"], [data-monetr-notification][data-stack-index="5"], [data-monetr-notification][data-stack-index="6"], [data-monetr-notification][data-stack-index="7"] {
+  opacity: 0;
+}
+
+[data-monetr-notification]:not([data-stack-index="0"]) {
+  pointer-events: none;
+}
+
+[data-monetr-notifier-stack][data-stack-hovered="true"] [data-monetr-notification] {
+  --monetr-stack-offset: 14px;
+  --monetr-stack-scale: calc(1 - var(--monetr-stack-index) * .02);
+}
+
+[data-monetr-notification][data-dragging="true"] {
+  transition: opacity .15s ease-out;
+}
+
+[data-monetr-notification][data-state="entering"] {
+  opacity: 0;
+  --monetr-entry-y: 24px;
+}
+
+[data-monetr-notifier-stack][data-stack-anchor^="top-"] [data-monetr-notification][data-state="entering"] {
+  --monetr-entry-y: -24px;
+}
+
+[data-monetr-notification][data-state="exiting"] {
+  pointer-events: none;
+  animation: .28s ease-out forwards monetr-notification-toast-out;
+}
+
+[data-monetr-notifier-stack][data-stack-anchor^="top-"] [data-monetr-notification][data-state="exiting"] {
+  animation-name: monetr-notification-toast-out-top;
+}
+
+[data-monetr-notification][data-state="swiped-out"][data-swipe-direction="1"] {
+  pointer-events: none;
+  animation: .3s cubic-bezier(.32, .72, .37, .92) forwards monetr-notification-swipe-out-right;
+}
+
+[data-monetr-notification][data-state="swiped-out"][data-swipe-direction="-1"] {
+  pointer-events: none;
+  animation: .3s cubic-bezier(.32, .72, .37, .92) forwards monetr-notification-swipe-out-left;
+}
+
+[data-monetr-notification][data-monetr-notification-variant="success"] {
+  --monetr-notification-progress-bar: var(--monetr-notification-success);
+}
+
+[data-monetr-notification][data-monetr-notification-variant="error"] {
+  --monetr-notification-progress-bar: var(--monetr-notification-error);
+}
+
+[data-monetr-notification][data-monetr-notification-variant="warning"] {
+  --monetr-notification-progress-bar: var(--monetr-notification-warning);
+}
+
+[data-monetr-notification][data-monetr-notification-variant="info"] {
+  --monetr-notification-progress-bar: var(--monetr-notification-info);
+}
+
+[data-monetr-notification-icon-slot] {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+[data-monetr-notification-pip] {
+  background: var(--monetr-notification-progress-bar);
+  width: 8px;
+  height: 8px;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--monetr-notification-progress-bar) 53%, transparent);
+  border-radius: 50%;
+  flex-shrink: 0;
+  animation: .4s cubic-bezier(.34, 1.56, .64, 1) .15s both monetr-notification-pip-in;
+}
+
+[data-monetr-notification-message] {
+  flex: auto;
+  min-width: 0;
+}
+
+[data-monetr-notification-action] {
+  border: 1px solid var(--monetr-notification-border);
+  color: var(--monetr-notification-fg);
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border-radius: 8px;
+  flex-shrink: 0;
+  padding: 5px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  transition: background .15s, border-color .15s;
+}
+
+[data-monetr-notification-action]:hover {
+  background: var(--monetr-notification-border);
+}
+
+[data-monetr-notification-dismiss] {
+  color: var(--monetr-notification-fg-muted);
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  flex-shrink: 0;
+  padding: 2px 4px;
+  font-size: 16px;
+  line-height: 1;
+  transition: color .15s;
+}
+
+[data-monetr-notification-dismiss]:hover {
+  color: var(--monetr-notification-fg);
+}
+
+[data-monetr-notification-progress-track] {
+  background: var(--monetr-notification-progress-track);
+  pointer-events: none;
+  height: 2px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+[data-monetr-notification-progress-bar-fill] {
+  transform-origin: 0;
+  width: 100%;
+  height: 100%;
+  transform: scaleX(calc(1 - var(--monetr-notification-progress, 0)));
+  background: var(--monetr-notification-progress-bar);
+  opacity: .7;
+  border-radius: 0 1px 1px 0;
+  transition: transform 80ms linear;
+}
+
+[data-monetr-notification][data-stack-hovered-self="true"] [data-monetr-notification-progress-bar-fill] {
+  transition: none;
+}
+
+@keyframes monetr-notification-pip-in {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes monetr-notification-toast-out {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 12px, 0) scale(.94);
+  }
+}
+
+@keyframes monetr-notification-toast-out-top {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -12px, 0) scale(.94);
+  }
+}
+
+@keyframes monetr-notification-swipe-out-right {
+  0% {
+    opacity: 1;
+    transform: translate3d(var(--monetr-drag-x, 0px), 0, 0) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(120%, 0, 0) scale(.9) rotate(8deg);
+  }
+}
+
+@keyframes monetr-notification-swipe-out-left {
+  0% {
+    opacity: 1;
+    transform: translate3d(var(--monetr-drag-x, 0px), 0, 0) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(-120%, 0, 0) scale(.9) rotate(-8deg);
+  }
+}
+
+[data-monetr-notification][data-state="swiped-out"][data-swipe-axis="y"][data-swipe-direction="1"] {
+  animation: .3s cubic-bezier(.32, .72, .37, .92) forwards monetr-notification-swipe-out-down;
+}
+
+[data-monetr-notification][data-state="swiped-out"][data-swipe-axis="y"][data-swipe-direction="-1"] {
+  animation: .3s cubic-bezier(.32, .72, .37, .92) forwards monetr-notification-swipe-out-up;
+}
+
+@keyframes monetr-notification-swipe-out-down {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, var(--monetr-drag-y, 0px), 0) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 120%, 0) scale(.9);
+  }
+}
+
+@keyframes monetr-notification-swipe-out-up {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, var(--monetr-drag-y, 0px), 0) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -120%, 0) scale(.9);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-monetr-notification], [data-monetr-notification-progress-bar-fill], [data-monetr-notification-pip] {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+

package/dist/types.d.ts

@@ -0,0 +1,79 @@
+import type { ReactNode, SyntheticEvent } from 'react';
+export type VariantType = 'default' | 'success' | 'error' | 'warning' | 'info';
+export type SnackbarKey = string | number;
+export type SnackbarMessage = ReactNode;
+export interface AnchorOrigin {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+}
+export type CloseReason = 'timeout' | 'instructed' | 'maxsnack' | 'clickaway' | 'swipe';
+export interface OptionsObject {
+    key?: SnackbarKey;
+    variant?: VariantType;
+    /** Shorthand for `autoHideDuration: null`. */
+    persist?: boolean;
+    /** Auto-hide duration in ms. `null` or `0` disables auto-hide; `undefined` inherits the provider default. */
+    autoHideDuration?: number | null;
+    anchorOrigin?: AnchorOrigin;
+    /** When `true`, this item ignores window-blur events. */
+    disableWindowBlurListener?: boolean;
+    /** Action button. A node, or a render fn that receives the snackbar key. */
+    action?: ReactNode | ((key: SnackbarKey) => ReactNode);
+    onClose?: (event: SyntheticEvent<HTMLElement> | null, reason: CloseReason, key: SnackbarKey) => void;
+}
+export interface ProviderContext {
+    enqueueSnackbar: (message: SnackbarMessage, options?: OptionsObject) => SnackbarKey;
+    /** Pass no argument to close every active notification. */
+    closeSnackbar: (key?: SnackbarKey) => void;
+}
+export interface SnackbarProviderProps {
+    children: ReactNode;
+    /** Visible items per anchor stack. */
+    maxSnack?: number;
+    /** Default anchor for new notifications. */
+    anchorOrigin?: AnchorOrigin;
+    /** Default auto-hide duration in ms. `null` disables auto-hide. */
+    autoHideDuration?: number | null;
+    /** Replaces the variant pip with a node per variant. Rendered before the message. */
+    iconVariant?: Partial<Record<VariantType, ReactNode>>;
+    /** Portal target. Defaults to `document.body`. */
+    container?: HTMLElement | null;
+    /** When the lazy renderer chunk should download. Defaults to `'idle'`. */
+    prefetch?: 'never' | 'idle' | 'mount';
+}
+export type SnackbarItemState = 'entering' | 'visible' | 'paused' | 'exiting' | 'swiped-out';
+export interface SnackbarItem {
+    key: SnackbarKey;
+    message: SnackbarMessage;
+    variant: VariantType;
+    autoHideDuration: number | null;
+    anchorOrigin: AnchorOrigin;
+    disableWindowBlurListener: boolean;
+    action: OptionsObject['action'];
+    onClose: OptionsObject['onClose'];
+    createdAt: number;
+    state: SnackbarItemState;
+    swipeDirection: -1 | 0 | 1;
+}
+export interface NotifierRootProps {
+    queue: SnackbarItem[];
+    dispatch: (action: NotifierAction) => void;
+    iconVariant?: Partial<Record<VariantType, ReactNode>>;
+    container?: HTMLElement | null;
+    maxSnack: number;
+}
+export type NotifierAction = {
+    type: 'set-state';
+    key: SnackbarKey;
+    state: SnackbarItemState;
+} | {
+    type: 'swipe';
+    key: SnackbarKey;
+    direction: -1 | 1;
+} | {
+    type: 'dismiss';
+    key: SnackbarKey;
+} | {
+    type: 'remove';
+    key: SnackbarKey;
+};

package/dist/use-queue.d.ts

@@ -0,0 +1,29 @@
+import type { AnchorOrigin, NotifierAction, OptionsObject, SnackbarItem, SnackbarKey, SnackbarMessage } from './types';
+type EnqueueAction = {
+    type: 'enqueue';
+    item: SnackbarItem;
+    dropKeys: SnackbarKey[];
+};
+export type Action = EnqueueAction | NotifierAction | {
+    type: 'close-all';
+};
+export declare function anchorKey(a: AnchorOrigin): string;
+export declare function isLiveState(state: SnackbarItem['state']): boolean;
+interface ProviderDefaults {
+    anchorOrigin?: AnchorOrigin;
+    autoHideDuration?: number | null;
+}
+export declare function makeInstance(message: SnackbarMessage, options: OptionsObject | undefined, defaults: ProviderDefaults): SnackbarItem;
+export declare function findOverflowKeys(state: SnackbarItem[], incoming: SnackbarItem, maxSnack: number): SnackbarKey[];
+export declare function queueReducer(state: SnackbarItem[], action: Action): SnackbarItem[];
+export declare const initialQueue: SnackbarItem[];
+export declare function providerDefaults(props: {
+    anchorOrigin?: AnchorOrigin;
+    autoHideDuration?: number | null;
+    maxSnack?: number;
+}): {
+    anchorOrigin: AnchorOrigin;
+    autoHideDuration: number | null;
+    maxSnack: number;
+};
+export {};

package/dist/use-queue.js

@@ -0,0 +1,97 @@
+import { DEFAULT_ANCHOR_HORIZONTAL, DEFAULT_ANCHOR_VERTICAL, DEFAULT_AUTO_HIDE_DURATION, DEFAULT_MAX_SNACK } from "./constants.js";
+let _idCounter = 0;
+function nextKey() {
+    _idCounter += 1;
+    return _idCounter;
+}
+function sameAnchor(a, b) {
+    return a.vertical === b.vertical && a.horizontal === b.horizontal;
+}
+function anchorKey(a) {
+    return `${a.vertical}-${a.horizontal}`;
+}
+function isLiveState(state) {
+    return 'entering' === state || 'visible' === state || 'paused' === state;
+}
+function resolveAutoHideDuration(options, defaults) {
+    if (options?.persist === true) return null;
+    if (options?.autoHideDuration !== void 0) return options.autoHideDuration;
+    if (void 0 !== defaults.autoHideDuration) return defaults.autoHideDuration;
+    return DEFAULT_AUTO_HIDE_DURATION;
+}
+function makeInstance(message, options, defaults) {
+    const variant = options?.variant ?? 'default';
+    const anchorOrigin = options?.anchorOrigin ?? defaults.anchorOrigin ?? {
+        vertical: DEFAULT_ANCHOR_VERTICAL,
+        horizontal: DEFAULT_ANCHOR_HORIZONTAL
+    };
+    return {
+        key: options?.key ?? nextKey(),
+        message,
+        variant,
+        autoHideDuration: resolveAutoHideDuration(options, defaults),
+        anchorOrigin,
+        disableWindowBlurListener: options?.disableWindowBlurListener ?? false,
+        action: options?.action,
+        onClose: options?.onClose,
+        createdAt: Date.now(),
+        state: 'entering',
+        swipeDirection: 0
+    };
+}
+function findOverflowKeys(state, incoming, maxSnack) {
+    const live = state.filter((s)=>sameAnchor(s.anchorOrigin, incoming.anchorOrigin) && isLiveState(s.state));
+    const projected = live.length + 1;
+    if (projected <= maxSnack) return [];
+    const dropCount = projected - maxSnack;
+    return live.slice(-dropCount).map((s)=>s.key);
+}
+function queueReducer(state, action) {
+    switch(action.type){
+        case 'enqueue':
+            {
+                const filtered = action.dropKeys.length > 0 ? state.filter((s)=>!action.dropKeys.includes(s.key)) : state;
+                return [
+                    action.item,
+                    ...filtered
+                ];
+            }
+        case 'set-state':
+            return state.map((s)=>s.key === action.key ? {
+                    ...s,
+                    state: action.state
+                } : s);
+        case 'swipe':
+            return state.map((s)=>s.key === action.key ? {
+                    ...s,
+                    state: 'swiped-out',
+                    swipeDirection: action.direction
+                } : s);
+        case 'dismiss':
+            return state.map((s)=>s.key === action.key && isLiveState(s.state) ? {
+                    ...s,
+                    state: 'exiting'
+                } : s);
+        case 'remove':
+            return state.filter((s)=>s.key !== action.key);
+        case 'close-all':
+            return state.map((s)=>isLiveState(s.state) ? {
+                    ...s,
+                    state: 'exiting'
+                } : s);
+        default:
+            return state;
+    }
+}
+const initialQueue = [];
+function providerDefaults(props) {
+    return {
+        anchorOrigin: props.anchorOrigin ?? {
+            vertical: DEFAULT_ANCHOR_VERTICAL,
+            horizontal: DEFAULT_ANCHOR_HORIZONTAL
+        },
+        autoHideDuration: void 0 !== props.autoHideDuration ? props.autoHideDuration : DEFAULT_AUTO_HIDE_DURATION,
+        maxSnack: props.maxSnack ?? DEFAULT_MAX_SNACK
+    };
+}
+export { anchorKey, findOverflowKeys, initialQueue, isLiveState, makeInstance, providerDefaults, queueReducer };

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@monetr/notify",
+  "version": "1.0.0",
+  "description": "Notification/toast component for React.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "keywords": [
+    "react",
+    "toast",
+    "notification",
+    "snackbar",
+    "alert"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "license": "EPL-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/monetr/notify.git"
+  },
+  "bugs": {
+    "url": "https://github.com/monetr/notify/issues"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.14",
+    "@rsbuild/core": "2.0.4",
+    "@rsbuild/plugin-react": "2.0.0",
+    "@rsdoctor/rspack-plugin": "1.5.9",
+    "@rslib/core": "0.21.3",
+    "@rspress/core": "2.0.10",
+    "@rstest/adapter-rslib": "0.2.2",
+    "@rstest/browser": "0.9.10",
+    "@rstest/browser-react": "0.9.10",
+    "@rstest/core": "0.9.10",
+    "@types/node": "24.12.2",
+    "@types/react": "18.3.28",
+    "@types/react-dom": "18.3.7",
+    "playwright": "1.59.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "typescript": "6.0.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0 || ^19.0.0 || ^19.0.0-rc",
+    "react-dom": "^18.0 || ^19.0.0 || ^19.0.0-rc"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build": "pnpm type-check && rslib build",
+    "build:analyze": "RSDOCTOR=true pnpm build",
+    "clean": "rm -rf node_modules dist",
+    "dev": "rslib build --watch",
+    "dev:demo": "rsbuild dev",
+    "docs:dev": "rspress dev",
+    "docs:build": "rspress build",
+    "docs:preview": "rspress preview",
+    "lint": "biome check",
+    "lint:fix": "biome check --write",
+    "test": "rstest run",
+    "test:firefox": "rstest run --browser.name firefox",
+    "test:webkit": "rstest run --browser.name webkit"
+  }
+}