react-strawberry-toast 1.0.0-alpha.1

package/README.md

@@ -0,0 +1,69 @@
+# React-Strawberry-Toast
+
+A simple and customizable React toast library
+
+## Documentation
+
+For more detailed information, please refer to the official [Documentation](https://dkpark10.github.io/react-strawberry-toast/)
+
+## Installation
+
+```bash
+npm i --save react-strawberry-toast
+```
+
+```bash
+yarn add react-strawberry-toast
+```
+
+```bash
+pnpm i --save react-strawberry-toast
+```
+
+## Usage
+
+```jsx
+import { ToastContainer, toast } from 'react-strawberry-toast';
+import 'react-strawberry-toast/dist/style.css';
+  
+function App() {
+  const click = () => {
+    toast('hello strawberry toast');
+  };
+      
+  return (
+    <>
+      <ToastContainer />
+      <button type='button' onClick={click}>click</button>
+    </>
+  );
+}
+```
+
+## API
+
+### &lt;ToastContainer /&gt;
+
+| Option | Description | Type | Required |
+|:-----------|:-----------|:-----------|:-----------|
+| Position      | Global toast's Position  |  top-left, top-center, top-right, bottom-left, bottom-center, bottom-right | false |
+| ContainerId      | ToastContainer's unique id  |  String | false |
+| Reverse      | Direction when toast appear  |  Boolean | false |
+| Gap      | Gap Between toasts  |  Boolean | false |
+
+
+### toast
+
+| Option | Description | Type | Required |
+|:-----------|:-----------|:-----------|:-----------|
+| toastId      | Toast's unique Id  |  String | false |
+| Position      | Position per toast  | top-left, top-center, top-right, bottom-left, bottom-center, bottom-right | false |
+| ContainerId      | ID shown in the Toast Container Unique ID  |  String | false |
+| PauseOnHover      | he Option that sets the timer to stop or not when a hover event occurs  |  Boolean | false |
+| ToastType      | Toast Type |  default, custom, success, error, laoding, warn | false |
+| TimeOut      | Time for toast to disappear  |  Number | false |
+| RemoveTimeOut      | Time for toast to remove In Toast List  |  Number | false |
+
+## License
+
+MIT

package/dist/headless.d.mts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+
+type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
+
+type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
+type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn';
+interface BaseOptions {
+    toastId?: string;
+    timeOut?: number;
+    removeTimeOut?: number;
+}
+interface ToastBaseState {
+    toastId: string;
+    data: ReactNode;
+    isVisible: boolean;
+    createdAt: number;
+    pausedAt?: number;
+    updated?: boolean;
+}
+interface Options extends BaseOptions {
+    position?: Position;
+    containerId?: string;
+    pauseOnHover?: boolean;
+    toastType?: ToastType;
+}
+interface ToastDataCallback {
+    close: () => void;
+    immediatelyClose: () => void;
+    isVisible: boolean;
+    icons: Record<Exclude<ToastType, 'default' | 'custom'>, ReactNode>;
+}
+type ToastState = ToastBaseState & BaseOptions;
+type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
+type NonHeadlessToastState = RequiredExcept<Options, 'containerId' | 'position'> & Omit<ToastState, 'data'> & {
+    data: ToastDataWithCallback | ReactNode;
+};
+
+declare const useToasts: () => Array<ToastState>;
+
+declare const toast: {
+    (data: ToastState["data"], options?: BaseOptions): string;
+    setActive: (toastId: ToastState["toastId"]) => void;
+    isActive: (toastId: ToastState["toastId"]) => boolean;
+    disappear: (toastId: ToastState["toastId"], timeOut: number) => void;
+    resume: (toastId: ToastState["toastId"]) => void;
+    pause: (toastId: ToastState["toastId"]) => void;
+    replace: (toastId: ToastState["toastId"], data: ToastState["data"], options?: (Options & {
+        toastType: NonHeadlessToastState["toastType"];
+    }) | undefined) => void;
+    remove: (toastId: ToastState["toastId"], timeOut?: number) => void;
+};
+
+export { type BaseOptions, type ToastState, toast, useToasts };

package/dist/headless.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+
+type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
+
+type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
+type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn';
+interface BaseOptions {
+    toastId?: string;
+    timeOut?: number;
+    removeTimeOut?: number;
+}
+interface ToastBaseState {
+    toastId: string;
+    data: ReactNode;
+    isVisible: boolean;
+    createdAt: number;
+    pausedAt?: number;
+    updated?: boolean;
+}
+interface Options extends BaseOptions {
+    position?: Position;
+    containerId?: string;
+    pauseOnHover?: boolean;
+    toastType?: ToastType;
+}
+interface ToastDataCallback {
+    close: () => void;
+    immediatelyClose: () => void;
+    isVisible: boolean;
+    icons: Record<Exclude<ToastType, 'default' | 'custom'>, ReactNode>;
+}
+type ToastState = ToastBaseState & BaseOptions;
+type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
+type NonHeadlessToastState = RequiredExcept<Options, 'containerId' | 'position'> & Omit<ToastState, 'data'> & {
+    data: ToastDataWithCallback | ReactNode;
+};
+
+declare const useToasts: () => Array<ToastState>;
+
+declare const toast: {
+    (data: ToastState["data"], options?: BaseOptions): string;
+    setActive: (toastId: ToastState["toastId"]) => void;
+    isActive: (toastId: ToastState["toastId"]) => boolean;
+    disappear: (toastId: ToastState["toastId"], timeOut: number) => void;
+    resume: (toastId: ToastState["toastId"]) => void;
+    pause: (toastId: ToastState["toastId"]) => void;
+    replace: (toastId: ToastState["toastId"], data: ToastState["data"], options?: (Options & {
+        toastType: NonHeadlessToastState["toastType"];
+    }) | undefined) => void;
+    remove: (toastId: ToastState["toastId"], timeOut?: number) => void;
+};
+
+export { type BaseOptions, type ToastState, toast, useToasts };

package/dist/headless.js

@@ -0,0 +1 @@
+"use strict";var I=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var o in e)I(t,o,{get:e[o],enumerable:!0})},w=(t,e,o,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of x(e))!_.call(t,n)&&n!==o&&I(t,n,{get:()=>e[n],enumerable:!(c=b(e,n))||c.enumerable});return t};var U=t=>w(I({},"__esModule",{value:!0}),t);var H={};g(H,{toast:()=>T,useToasts:()=>R});module.exports=U(H);var h=require("react");var y=()=>{let t=0;return()=>String(t++)};var l=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}setState(e){this.state=typeof e=="function"?e(this.state):e,this.listeners.forEach(o=>o())}getSnapShot(){return this.state}};var M=t=>{let e=s=>{let a=t.toastTimers.get(s);clearTimeout(a),t.toastTimers.delete(s)},o=s=>{t.activatedToasts.add(s)},c=s=>t.activatedToasts.has(s),n=(s,a=200)=>{setTimeout(()=>{t.state=t.state.filter(r=>r.toastId!==s),t.setState([...t.state])},a),e(s)},d=(s,a,r)=>{t.state=t.state.map(p=>p.toastId===s?{...p,...r,updated:!0,data:a}:p),t.setState([...t.state])},A=s=>{let a=new Date().getTime();t.state=t.state.map(r=>r.toastId===s?{...r,pausedAt:a}:r),e(s),t.setState([...t.state])},f=(s,a)=>{let r=setTimeout(()=>{var O;t.state=t.state.map(u=>u.toastId===s?{...u,isVisible:!1}:u),t.setState([...t.state]);let p=(O=t.state.find(u=>u.toastId===s))==null?void 0:O.removeTimeOut;n(s,p)},a>2147483647?2147483647:a);t.toastTimers.set(s,r)};return{setActive:o,isActive:c,disappear:f,resume:s=>{if(t.toastTimers.has(s))return;let a=t.state.find(p=>p.toastId===s);if(!a)return;let r=a.createdAt+(a.timeOut||3e3)-(a.pausedAt||0);f(s,r)},pause:A,replace:d,remove:n}};var i=new l,P=y(),D=()=>(t,e={})=>{let{timeOut:o=3e3,removeTimeOut:c=200,toastId:n}=e,d=n||P();if(T.isActive(d))throw new Error("A duplicate custom ID is not available.");let A=new Date().getTime(),f={...e,timeOut:o>2147483647?2147483647:o,toastId:d,data:t,createdAt:A,removeTimeOut:c,isVisible:!0};return i.state.push(f),i.setState([...i.state]),d},T=(t,e={})=>D()(t,e),m=M(i);T.setActive=m.setActive;T.isActive=m.isActive;T.disappear=m.disappear;T.resume=m.resume;T.pause=m.pause;T.replace=m.replace;T.remove=m.remove;var R=()=>(0,h.useSyncExternalStore)(i.subscribe.bind(i),i.getSnapShot.bind(i),i.getSnapShot.bind(i));

package/dist/headless.mjs

@@ -0,0 +1 @@
+import{useSyncExternalStore as b}from"react";var O=()=>{let t=0;return()=>String(t++)};var f=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(a){return this.listeners.add(a),()=>{this.listeners.delete(a)}}setState(a){this.state=typeof a=="function"?a(this.state):a,this.listeners.forEach(p=>p())}getSnapShot(){return this.state}};var y=t=>{let a=e=>{let s=t.toastTimers.get(e);clearTimeout(s),t.toastTimers.delete(e)},p=e=>{t.activatedToasts.add(e)},l=e=>t.activatedToasts.has(e),u=(e,s=200)=>{setTimeout(()=>{t.state=t.state.filter(o=>o.toastId!==e),t.setState([...t.state])},s),a(e)},m=(e,s,o)=>{t.state=t.state.map(n=>n.toastId===e?{...n,...o,updated:!0,data:s}:n),t.setState([...t.state])},A=e=>{let s=new Date().getTime();t.state=t.state.map(o=>o.toastId===e?{...o,pausedAt:s}:o),a(e),t.setState([...t.state])},S=(e,s)=>{let o=setTimeout(()=>{var E;t.state=t.state.map(c=>c.toastId===e?{...c,isVisible:!1}:c),t.setState([...t.state]);let n=(E=t.state.find(c=>c.toastId===e))==null?void 0:E.removeTimeOut;u(e,n)},s>2147483647?2147483647:s);t.toastTimers.set(e,o)};return{setActive:p,isActive:l,disappear:S,resume:e=>{if(t.toastTimers.has(e))return;let s=t.state.find(n=>n.toastId===e);if(!s)return;let o=s.createdAt+(s.timeOut||3e3)-(s.pausedAt||0);S(e,o)},pause:A,replace:m,remove:u}};var r=new f,M=O(),h=()=>(t,a={})=>{let{timeOut:p=3e3,removeTimeOut:l=200,toastId:u}=a,m=u||M();if(i.isActive(m))throw new Error("A duplicate custom ID is not available.");let A=new Date().getTime(),S={...a,timeOut:p>2147483647?2147483647:p,toastId:m,data:t,createdAt:A,removeTimeOut:l,isVisible:!0};return r.state.push(S),r.setState([...r.state]),m},i=(t,a={})=>h()(t,a),T=y(r);i.setActive=T.setActive;i.isActive=T.isActive;i.disappear=T.disappear;i.resume=T.resume;i.pause=T.pause;i.replace=T.replace;i.remove=T.remove;var X=()=>b(r.subscribe.bind(r),r.getSnapShot.bind(r),r.getSnapShot.bind(r));export{i as toast,X as useToasts};

package/dist/index.css

@@ -0,0 +1 @@
+@keyframes l3{to{transform:rotate(1turn)}}@keyframes react-strawberry-toast_fade-in{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes react-strawberry-toast_fade-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}@keyframes react-strawberry-toast_fade-in-reverse{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes react-strawberry-toast_fade-out-reverse{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.react-strawberry-toast__fade-in{animation:react-strawberry-toast_fade-in .3s ease-out}.react-strawberry-toast__fade-out{animation:react-strawberry-toast_fade-out .3s ease-out}.react-strawberry-toast__fade-in-reverse{animation:react-strawberry-toast_fade-in-reverse .3s ease-out}.react-strawberry-toast__fade-out-reverse{animation:react-strawberry-toast_fade-out-reverse .3s ease-out}.react-strawberry-toast__loading{width:15px;padding:3px;aspect-ratio:1;border-radius:50%;background:#6b6875;--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;animation:l3 1s infinite linear}

package/dist/index.d.mts

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+
+type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
+
+type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
+type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn';
+interface BaseOptions {
+    toastId?: string;
+    timeOut?: number;
+    removeTimeOut?: number;
+}
+interface ToastBaseState {
+    toastId: string;
+    data: ReactNode;
+    isVisible: boolean;
+    createdAt: number;
+    pausedAt?: number;
+    updated?: boolean;
+}
+interface Options extends BaseOptions {
+    position?: Position;
+    containerId?: string;
+    pauseOnHover?: boolean;
+    toastType?: ToastType;
+}
+interface ToastDataCallback {
+    close: () => void;
+    immediatelyClose: () => void;
+    isVisible: boolean;
+    icons: Record<Exclude<ToastType, 'default' | 'custom'>, ReactNode>;
+}
+type ToastState = ToastBaseState & BaseOptions;
+type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
+type NonHeadlessToastState = RequiredExcept<Options, 'containerId' | 'position'> & Omit<ToastState, 'data'> & {
+    data: ToastDataWithCallback | ReactNode;
+};
+
+type Listener = () => void;
+declare class ToastStore<T = ToastState> {
+    state: Array<T>;
+    listeners: Set<Listener>;
+    /** @description list containing toast activated since mount */
+    activatedToasts: Set<string>;
+    /** @description list with a timer for toast */
+    toastTimers: Map<string, number>;
+    constructor();
+    subscribe(listener: Listener): Listener;
+    /** @description must put a new memory value in the nextState. */
+    setState(nextState: Array<T> | ((state: Array<T>) => Array<T>)): void;
+    getSnapShot(): Array<T>;
+}
+
+declare const toastStore: ToastStore<NonHeadlessToastState>;
+declare const toast: {
+    (data: ToastState["data"] | ToastDataWithCallback, options?: Options): string;
+    setActive: (toastId: ToastState["toastId"]) => void;
+    isActive: (toastId: ToastState["toastId"]) => boolean;
+    disappear: (toastId: ToastState["toastId"], timeOut: number) => void;
+    resume: (toastId: ToastState["toastId"]) => void;
+    pause: (toastId: ToastState["toastId"]) => void;
+    replace: (toastId: ToastState["toastId"], data: ToastState["data"], options?: (Options & {
+        toastType: NonHeadlessToastState["toastType"];
+    }) | undefined) => void;
+    remove: (toastId: ToastState["toastId"], timeOut?: number) => void;
+    success: (data: ReactNode, options?: Options) => ToastState["toastId"];
+    error: (data: ReactNode, options?: Options) => ToastState["toastId"];
+    warn: (data: ReactNode, options?: Options) => ToastState["toastId"];
+    loading: (data: ReactNode, options?: Options) => ToastState["toastId"];
+    custom: (data: ReactNode | ToastDataWithCallback, options?: Options) => ToastState["toastId"];
+    promise(promise: Promise<any>, promiseOption: {
+        loading: ReactNode;
+        success: ReactNode;
+        error: ReactNode;
+    }, options?: Options): void;
+};
+
+interface ToastContainerProps {
+    position?: Position;
+    containerId?: string;
+    reverse?: boolean;
+    gap?: number;
+}
+declare function ToastContainer({ position: globalPosition, containerId, gap, reverse, }: ToastContainerProps): React.JSX.Element;
+
+export { type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastDataWithCallback, type ToastState, type ToastType, toast, toastStore };

package/dist/index.d.ts

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+
+type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
+
+type Position = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
+type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn';
+interface BaseOptions {
+    toastId?: string;
+    timeOut?: number;
+    removeTimeOut?: number;
+}
+interface ToastBaseState {
+    toastId: string;
+    data: ReactNode;
+    isVisible: boolean;
+    createdAt: number;
+    pausedAt?: number;
+    updated?: boolean;
+}
+interface Options extends BaseOptions {
+    position?: Position;
+    containerId?: string;
+    pauseOnHover?: boolean;
+    toastType?: ToastType;
+}
+interface ToastDataCallback {
+    close: () => void;
+    immediatelyClose: () => void;
+    isVisible: boolean;
+    icons: Record<Exclude<ToastType, 'default' | 'custom'>, ReactNode>;
+}
+type ToastState = ToastBaseState & BaseOptions;
+type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
+type NonHeadlessToastState = RequiredExcept<Options, 'containerId' | 'position'> & Omit<ToastState, 'data'> & {
+    data: ToastDataWithCallback | ReactNode;
+};
+
+type Listener = () => void;
+declare class ToastStore<T = ToastState> {
+    state: Array<T>;
+    listeners: Set<Listener>;
+    /** @description list containing toast activated since mount */
+    activatedToasts: Set<string>;
+    /** @description list with a timer for toast */
+    toastTimers: Map<string, number>;
+    constructor();
+    subscribe(listener: Listener): Listener;
+    /** @description must put a new memory value in the nextState. */
+    setState(nextState: Array<T> | ((state: Array<T>) => Array<T>)): void;
+    getSnapShot(): Array<T>;
+}
+
+declare const toastStore: ToastStore<NonHeadlessToastState>;
+declare const toast: {
+    (data: ToastState["data"] | ToastDataWithCallback, options?: Options): string;
+    setActive: (toastId: ToastState["toastId"]) => void;
+    isActive: (toastId: ToastState["toastId"]) => boolean;
+    disappear: (toastId: ToastState["toastId"], timeOut: number) => void;
+    resume: (toastId: ToastState["toastId"]) => void;
+    pause: (toastId: ToastState["toastId"]) => void;
+    replace: (toastId: ToastState["toastId"], data: ToastState["data"], options?: (Options & {
+        toastType: NonHeadlessToastState["toastType"];
+    }) | undefined) => void;
+    remove: (toastId: ToastState["toastId"], timeOut?: number) => void;
+    success: (data: ReactNode, options?: Options) => ToastState["toastId"];
+    error: (data: ReactNode, options?: Options) => ToastState["toastId"];
+    warn: (data: ReactNode, options?: Options) => ToastState["toastId"];
+    loading: (data: ReactNode, options?: Options) => ToastState["toastId"];
+    custom: (data: ReactNode | ToastDataWithCallback, options?: Options) => ToastState["toastId"];
+    promise(promise: Promise<any>, promiseOption: {
+        loading: ReactNode;
+        success: ReactNode;
+        error: ReactNode;
+    }, options?: Options): void;
+};
+
+interface ToastContainerProps {
+    position?: Position;
+    containerId?: string;
+    reverse?: boolean;
+    gap?: number;
+}
+declare function ToastContainer({ position: globalPosition, containerId, gap, reverse, }: ToastContainerProps): React.JSX.Element;
+
+export { type BaseOptions, type NonHeadlessToastState, type Options, type Position, type ToastBaseState, ToastContainer, type ToastDataWithCallback, type ToastState, type ToastType, toast, toastStore };

package/dist/index.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";var $=Object.create;var _=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var q=(t,e)=>{for(var o in e)_(t,o,{get:e[o],enumerable:!0})},P=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let d of j(e))!G.call(t,d)&&d!==o&&_(t,d,{get:()=>e[d],enumerable:!(i=B(e,d))||i.enumerable});return t};var M=(t,e,o)=>(o=t!=null?$(F(t)):{},P(e||!t||!t.__esModule?_(o,"default",{value:t,enumerable:!0}):o,t)),J=t=>P(_({},"__esModule",{value:!0}),t);var ot={};q(ot,{ToastContainer:()=>et,toast:()=>s,toastStore:()=>l});module.exports=J(ot);var H=()=>{let t=0;return()=>String(t++)};var A=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}setState(e){this.state=typeof e=="function"?e(this.state):e,this.listeners.forEach(o=>o())}getSnapShot(){return this.state}};var g="react-strawberry-toast";var z=t=>{let e=a=>{let n=t.toastTimers.get(a);clearTimeout(n),t.toastTimers.delete(a)},o=a=>{t.activatedToasts.add(a)},i=a=>t.activatedToasts.has(a),d=(a,n=200)=>{setTimeout(()=>{t.state=t.state.filter(f=>f.toastId!==a),t.setState([...t.state])},n),e(a)},y=(a,n,f)=>{t.state=t.state.map(b=>b.toastId===a?{...b,...f,updated:!0,data:n}:b),t.setState([...t.state])},r=a=>{let n=new Date().getTime();t.state=t.state.map(f=>f.toastId===a?{...f,pausedAt:n}:f),e(a),t.setState([...t.state])},c=(a,n)=>{let f=setTimeout(()=>{var W;t.state=t.state.map(w=>w.toastId===a?{...w,isVisible:!1}:w),t.setState([...t.state]);let b=(W=t.state.find(w=>w.toastId===a))==null?void 0:W.removeTimeOut;d(a,b)},n>2147483647?2147483647:n);t.toastTimers.set(a,f)};return{setActive:o,isActive:i,disappear:c,resume:a=>{if(t.toastTimers.has(a))return;let n=t.state.find(b=>b.toastId===a);if(!n)return;let f=n.createdAt+(n.timeOut||3e3)-(n.pausedAt||0);c(a,f)},pause:r,replace:y,remove:d}};var l=new A,K=H(),S=(t="default")=>(e,o={})=>{let{timeOut:i=3e3,removeTimeOut:d=200,pauseOnHover:y=!0,toastId:r}=o,c=r||K();if(s.isActive(c))throw new Error("A duplicate custom ID is not available.");let v=new Date().getTime(),a={...o,timeOut:i>2147483647?2147483647:i,toastId:c,data:e,createdAt:v,toastType:t,pauseOnHover:y,removeTimeOut:d,isVisible:!0};return l.state.push(a),l.setState([...l.state]),c},s=(t,e={})=>S()(t,e),I=z(l);s.setActive=I.setActive;s.isActive=I.isActive;s.disappear=I.disappear;s.resume=I.resume;s.pause=I.pause;s.replace=I.replace;s.remove=I.remove;s.success=S("success");s.error=S("error");s.warn=S("warn");s.loading=S("loading");s.custom=S("custom");s.promise=(t,e,o={})=>{let{loading:i,success:d,error:y}=e,r=s.loading(i,{...o,timeOut:2147483647});t.then(()=>{s.replace(r,d,{...o,toastType:"success"})}).catch(()=>{s.replace(r,y,{...o,toastType:"error"})})};var T=M(require("react")),X=require("react");var p=M(require("react"));var L=require("react");function O({condition:t,children:e}){let o=L.Children.toArray(e);if(o.length>2)throw new Error("The number of children exceeds two.");return o.find(i=>t?i.key===".0":i.key===".1")}function k({children:t}){return t}function C({children:t}){return t}var V=({isVisible:t,position:e})=>t?/top/i.test(e)?`${g}__fade-in`:`${g}__fade-in-reverse`:/bottom/i.test(e)?`${g}__fade-out-reverse`:`${g}__fade-out`;var u=M(require("react"));function Q(){return u.default.createElement("svg",{stroke:"none",fill:"none",strokeWidth:"2",viewBox:"0 0 24 24",strokeLinecap:"round",strokeLinejoin:"round",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg"},u.default.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"}),u.default.createElement("path",{d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"#1ab173"}))}function Z(){return u.default.createElement("svg",{stroke:"none",fill:"#eb2639",strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg"},u.default.createElement("path",{d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"}))}function R(){return u.default.createElement("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg"},u.default.createElement("path",{d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"}))}var x={success:Q,error:Z,loading:()=>u.default.createElement("div",{className:`${g}__loading`}),warn:R};function U({status:t,children:e}){let o=t==="custom"||t==="default"?null:x[t];return u.default.createElement("div",{style:{boxSizing:"border-box",backgroundColor:"white",padding:"12px 14px 12px 12px",display:"flex",alignItems:"center",gap:5,borderRadius:8,boxShadow:"2px 4px 10px rgba(0, 0, 0, 0.1)"}},o&&u.default.createElement("span",{style:{minWidth:20,maxWidth:20}},u.default.createElement(o,null)),e)}function N({toastProps:t,...e}){let o=V({isVisible:t.isVisible,position:t.position}),i=typeof t.data=="function"?t.data({close:()=>s.disappear(t.toastId,0),immediatelyClose:()=>{s.disappear(t.toastId,0),s.remove(t.toastId,0)},icons:{success:p.default.createElement(x.success,null),error:p.default.createElement(x.error,null),warn:p.default.createElement(x.warn,null),loading:p.default.createElement(x.loading,null)},isVisible:t.isVisible}):t.data,d=()=>{t.pauseOnHover&&s.pause(t.toastId)},y=()=>{t.pauseOnHover&&s.resume(t.toastId)};return(0,p.useEffect)(()=>{s.isActive(t.toastId)||(s.setActive(t.toastId),s.disappear(t.toastId,t.timeOut))},[t.toastId]),(0,p.useEffect)(()=>{if(t.updated!==void 0){let r=t.timeOut>=2147483647?3e3:t.timeOut;s.disappear(t.toastId,r)}},[t.updated]),p.default.createElement("div",{role:"alert","data-testid":`container-${t.containerId}`,className:t.toastType==="custom"?"":o,onMouseEnter:d,onMouseLeave:y,...e},p.default.createElement(O,{condition:t.toastType!=="custom"},p.default.createElement(k,null,p.default.createElement(U,{status:t.toastType},i)),p.default.createElement(C,null,i)))}var Y=({position:t,reverse:e=!1})=>/top/i.test(t)?e?"column-reverse":"column":/bottom/i.test(t)?e?"column":"column-reverse":"column";var m=16,tt={"top-left":{top:m,left:m},"top-center":{top:m,left:"50%",transform:"translateX(-50%)"},"top-right":{top:m,right:m},"bottom-left":{bottom:m,left:m},"bottom-center":{bottom:m,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:m,right:m}};function et({position:t="top-center",containerId:e="",gap:o=9,reverse:i=!1}){let d=(0,X.useSyncExternalStore)(l.subscribe.bind(l),l.getSnapShot.bind(l),l.getSnapShot.bind(l)),y=d.filter(r=>r.containerId===void 0).reduce((r,c)=>{let v=c.position||t;return c.position=v,r[v]=r[v]||[],r[v].push(c),r},{});return T.default.createElement(O,{condition:!!e},T.default.createElement(k,null,T.default.createElement("div",{style:{position:"absolute",zIndex:9999,pointerEvents:"none"}},T.default.createElement("div",{style:{pointerEvents:"auto",display:"flex",flexDirection:i?"column-reverse":"column",gap:o}},d.filter(r=>r.containerId===e).map(r=>T.default.createElement(N,{key:r.toastId,toastProps:r,style:{display:"flex"}}))))),T.default.createElement(C,null,T.default.createElement("div",{style:{position:"fixed",zIndex:9999,top:m,left:m,right:m,bottom:m,pointerEvents:"none"}},Object.entries(y).map(([r,c])=>{let v=tt[r],a=Y({position:r,reverse:i});return T.default.createElement("div",{key:r,"data-testid":r,style:{pointerEvents:"auto",position:"fixed",display:"flex",flexDirection:a,gap:o,...v}},c.map(n=>T.default.createElement(N,{key:n.toastId,toastProps:n,style:{display:"flex",justifyContent:"center"}})))}))))}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+"use client";
+var N=()=>{let t=0;return()=>String(t++)};var _=class{state=[];listeners=new Set;activatedToasts=new Set;toastTimers=new Map;constructor(){}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}setState(e){this.state=typeof e=="function"?e(this.state):e,this.listeners.forEach(r=>r())}getSnapShot(){return this.state}};var g="react-strawberry-toast";var W=t=>{let e=o=>{let i=t.toastTimers.get(o);clearTimeout(i),t.toastTimers.delete(o)},r=o=>{t.activatedToasts.add(o)},n=o=>t.activatedToasts.has(o),p=(o,i=200)=>{setTimeout(()=>{t.state=t.state.filter(c=>c.toastId!==o),t.setState([...t.state])},i),e(o)},f=(o,i,c)=>{t.state=t.state.map(b=>b.toastId===o?{...b,...c,updated:!0,data:i}:b),t.setState([...t.state])},a=o=>{let i=new Date().getTime();t.state=t.state.map(c=>c.toastId===o?{...c,pausedAt:i}:c),e(o),t.setState([...t.state])},m=(o,i)=>{let c=setTimeout(()=>{var D;t.state=t.state.map(w=>w.toastId===o?{...w,isVisible:!1}:w),t.setState([...t.state]);let b=(D=t.state.find(w=>w.toastId===o))==null?void 0:D.removeTimeOut;p(o,b)},i>2147483647?2147483647:i);t.toastTimers.set(o,c)};return{setActive:r,isActive:n,disappear:m,resume:o=>{if(t.toastTimers.has(o))return;let i=t.state.find(b=>b.toastId===o);if(!i)return;let c=i.createdAt+(i.timeOut||3e3)-(i.pausedAt||0);m(o,c)},pause:a,replace:f,remove:p}};var l=new _,V=N(),S=(t="default")=>(e,r={})=>{let{timeOut:n=3e3,removeTimeOut:p=200,pauseOnHover:f=!0,toastId:a}=r,m=a||V();if(s.isActive(m))throw new Error("A duplicate custom ID is not available.");let T=new Date().getTime(),o={...r,timeOut:n>2147483647?2147483647:n,toastId:m,data:e,createdAt:T,toastType:t,pauseOnHover:f,removeTimeOut:p,isVisible:!0};return l.state.push(o),l.setState([...l.state]),m},s=(t,e={})=>S()(t,e),I=W(l);s.setActive=I.setActive;s.isActive=I.isActive;s.disappear=I.disappear;s.resume=I.resume;s.pause=I.pause;s.replace=I.replace;s.remove=I.remove;s.success=S("success");s.error=S("error");s.warn=S("warn");s.loading=S("loading");s.custom=S("custom");s.promise=(t,e,r={})=>{let{loading:n,success:p,error:f}=e,a=s.loading(n,{...r,timeOut:2147483647});t.then(()=>{s.replace(a,p,{...r,toastType:"success"})}).catch(()=>{s.replace(a,f,{...r,toastType:"error"})})};import v from"react";import{useSyncExternalStore as B}from"react";import y,{useEffect as z}from"react";import{Children as U}from"react";function A({condition:t,children:e}){let r=U.toArray(e);if(r.length>2)throw new Error("The number of children exceeds two.");return r.find(n=>t?n.key===".0":n.key===".1")}function O({children:t}){return t}function k({children:t}){return t}var P=({isVisible:t,position:e})=>t?/top/i.test(e)?`${g}__fade-in`:`${g}__fade-in-reverse`:/bottom/i.test(e)?`${g}__fade-out-reverse`:`${g}__fade-out`;import u from"react";function Y(){return u.createElement("svg",{stroke:"none",fill:"none",strokeWidth:"2",viewBox:"0 0 24 24",strokeLinecap:"round",strokeLinejoin:"round",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg"},u.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"}),u.createElement("path",{d:"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z",strokeWidth:"0",fill:"#1ab173"}))}function X(){return u.createElement("svg",{stroke:"none",fill:"#eb2639",strokeWidth:"2",viewBox:"0 0 24 24",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg"},u.createElement("path",{d:"M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"}))}function $(){return u.createElement("svg",{stroke:"none",fill:"#fcba03",strokeWidth:"0",viewBox:"0 0 1024 1024",height:"22",width:"22",xmlns:"http://www.w3.org/2000/svg"},u.createElement("path",{d:"M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"}))}var x={success:Y,error:X,loading:()=>u.createElement("div",{className:`${g}__loading`}),warn:$};function H({status:t,children:e}){let r=t==="custom"||t==="default"?null:x[t];return u.createElement("div",{style:{boxSizing:"border-box",backgroundColor:"white",padding:"12px 14px 12px 12px",display:"flex",alignItems:"center",gap:5,borderRadius:8,boxShadow:"2px 4px 10px rgba(0, 0, 0, 0.1)"}},r&&u.createElement("span",{style:{minWidth:20,maxWidth:20}},u.createElement(r,null)),e)}function M({toastProps:t,...e}){let r=P({isVisible:t.isVisible,position:t.position}),n=typeof t.data=="function"?t.data({close:()=>s.disappear(t.toastId,0),immediatelyClose:()=>{s.disappear(t.toastId,0),s.remove(t.toastId,0)},icons:{success:y.createElement(x.success,null),error:y.createElement(x.error,null),warn:y.createElement(x.warn,null),loading:y.createElement(x.loading,null)},isVisible:t.isVisible}):t.data,p=()=>{t.pauseOnHover&&s.pause(t.toastId)},f=()=>{t.pauseOnHover&&s.resume(t.toastId)};return z(()=>{s.isActive(t.toastId)||(s.setActive(t.toastId),s.disappear(t.toastId,t.timeOut))},[t.toastId]),z(()=>{if(t.updated!==void 0){let a=t.timeOut>=2147483647?3e3:t.timeOut;s.disappear(t.toastId,a)}},[t.updated]),y.createElement("div",{role:"alert","data-testid":`container-${t.containerId}`,className:t.toastType==="custom"?"":r,onMouseEnter:p,onMouseLeave:f,...e},y.createElement(A,{condition:t.toastType!=="custom"},y.createElement(O,null,y.createElement(H,{status:t.toastType},n)),y.createElement(k,null,n)))}var L=({position:t,reverse:e=!1})=>/top/i.test(t)?e?"column-reverse":"column":/bottom/i.test(t)?e?"column":"column-reverse":"column";var d=16,j={"top-left":{top:d,left:d},"top-center":{top:d,left:"50%",transform:"translateX(-50%)"},"top-right":{top:d,right:d},"bottom-left":{bottom:d,left:d},"bottom-center":{bottom:d,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:d,right:d}};function _t({position:t="top-center",containerId:e="",gap:r=9,reverse:n=!1}){let p=B(l.subscribe.bind(l),l.getSnapShot.bind(l),l.getSnapShot.bind(l)),f=p.filter(a=>a.containerId===void 0).reduce((a,m)=>{let T=m.position||t;return m.position=T,a[T]=a[T]||[],a[T].push(m),a},{});return v.createElement(A,{condition:!!e},v.createElement(O,null,v.createElement("div",{style:{position:"absolute",zIndex:9999,pointerEvents:"none"}},v.createElement("div",{style:{pointerEvents:"auto",display:"flex",flexDirection:n?"column-reverse":"column",gap:r}},p.filter(a=>a.containerId===e).map(a=>v.createElement(M,{key:a.toastId,toastProps:a,style:{display:"flex"}}))))),v.createElement(k,null,v.createElement("div",{style:{position:"fixed",zIndex:9999,top:d,left:d,right:d,bottom:d,pointerEvents:"none"}},Object.entries(f).map(([a,m])=>{let T=j[a],o=L({position:a,reverse:n});return v.createElement("div",{key:a,"data-testid":a,style:{pointerEvents:"auto",position:"fixed",display:"flex",flexDirection:o,gap:r,...T}},m.map(i=>v.createElement(M,{key:i.toastId,toastProps:i,style:{display:"flex",justifyContent:"center"}})))}))))}export{_t as ToastContainer,s as toast,l as toastStore};

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "react-strawberry-toast",
+  "description": "simple headless free position react toast library",
+  "version": "1.0.0-alpha.1",
+  "author": "dkpark10",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dkpark10/react-strawberry-toast.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dkpark10/react-strawberry-toast/issues"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    },
+    "./dist/headless": {
+      "require": {
+        "types": "./dist/headless.d.ts",
+        "default": "./dist/headless.js"
+      },
+      "import": {
+        "types": "./dist/headless.d.mts",
+        "default": "./dist/headless.mjs"
+      }
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "dev": "pnpm run --filter=react-strawberry-toast-playground dev",
+    "dev:docs": "pnpm run --filter=react-strawberry-toast-docs dev",
+    "deploy:docs": "pnpm run --filter=react-strawberry-toast-docs deploy",
+    "build": "tsup",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^15.0.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "concurrently": "^9.1.0",
+    "esbuild-sass-plugin": "^3.3.1",
+    "jsdom": "^24.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup-preserve-directives": "^1.1.3",
+    "sass": "^1.83.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^1.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}

package/src/components/condition.tsx

@@ -0,0 +1,27 @@
+import { Children, type PropsWithChildren } from 'react';
+
+interface ConditionProps {
+  condition: boolean;
+}
+
+export function Condition({ condition, children }: ConditionProps & PropsWithChildren) {
+  const childrenArray = Children.toArray(children);
+  if (childrenArray.length > 2) {
+    throw new Error('The number of children exceeds two.');
+  }
+
+  return (childrenArray as any[]).find((child) => {
+    if (condition) {
+      return child.key === '.0';
+    }
+    return child.key === '.1';
+  });
+}
+
+export function If({ children }: PropsWithChildren) {
+  return children;
+}
+
+export function Else({ children }: PropsWithChildren) {
+  return children;
+}

package/src/components/if.tsx

@@ -0,0 +1,27 @@
+import { Children, type PropsWithChildren } from 'react';
+
+interface IfProps {
+  condition: boolean;
+}
+
+export function If({ condition, children }: IfProps & PropsWithChildren) {
+  const childrenArray = Children.toArray(children);
+  if (childrenArray.length > 2) {
+    throw new Error('The number of children exceeds two.');
+  }
+
+  return (childrenArray as any[]).find((child) => {
+    if (condition) {
+      return child.key === '.0';
+    }
+    return child.key === '.1';
+  });
+}
+
+export function Then({ children }: PropsWithChildren) {
+  return children;
+}
+
+export function Else({ children }: PropsWithChildren) {
+  return children;
+}