react-native-bread 0.5.2 → 0.5.3

package/lib/module/toast-store.js

@@ -1 +1,248 @@
-"use strict";const t={position:"top",offset:0,rtl:!1,stacking:!0,maxStack:3,dismissible:!0,showCloseButton:!0,colors:{success:{accent:"#28B770",background:"#FFFFFF"},error:{accent:"#F05964",background:"#FFFFFF"},info:{accent:"#EDBE43",background:"#FFFFFF"},loading:{accent:"#232323",background:"#FFFFFF"}},icons:{},toastStyle:{},titleStyle:{},descriptionStyle:{},defaultDuration:4e3};export const toastStore=new class{state={visibleToasts:[]};theme=t;listeners=new Set;toastIdCounter=0;timeouts=new Map;subscribe=t=>(this.listeners.add(t),()=>{this.listeners.delete(t)});emit(){for(const t of this.listeners)t(this.state)}setState(t){this.state={...this.state,...t},this.emit()}getState=()=>this.state;getTheme=()=>this.theme;setConfig=s=>{this.theme=function(s){if(!s)return t;const e={...t.colors};if(s.colors)for(const i of Object.keys(s.colors)){const o=s.colors[i];o&&(e[i]={...t.colors[i],...o})}return{position:s.position??t.position,offset:s.offset??t.offset,rtl:s.rtl??t.rtl,stacking:s.stacking??t.stacking,maxStack:s.maxStack??t.maxStack,dismissible:s.dismissible??t.dismissible,showCloseButton:s.showCloseButton??t.showCloseButton,colors:e,icons:{...t.icons,...s.icons},toastStyle:{...t.toastStyle,...s.toastStyle},titleStyle:{...t.titleStyle,...s.titleStyle},descriptionStyle:{...t.descriptionStyle,...s.descriptionStyle},defaultDuration:s.defaultDuration??t.defaultDuration}}(s)};show=(t,s,e="success",i,o)=>{const a=i??o?.duration??this.theme.defaultDuration,n=this.theme.stacking?this.theme.maxStack:1,l="toast-"+ ++this.toastIdCounter,c={id:l,title:t,description:s??o?.description,type:e,duration:a,createdAt:Date.now(),isExiting:!1,options:o},{visibleToasts:r}=this.state,h=r.filter(t=>!t.isExiting);if(h.length>=n){const t=h.slice(n-1);for(const s of t){const t=this.timeouts.get(s.id);t&&(clearTimeout(t),this.timeouts.delete(s.id))}const s=new Set(t.map(t=>t.id));if(!this.theme.stacking)return this.setState({visibleToasts:r.map(t=>s.has(t.id)?{...t,isExiting:!0}:t)}),setTimeout(()=>{for(const s of t)this.removeToast(s.id);this.addToast(c,a)},130),l;this.setState({visibleToasts:r.filter(t=>!s.has(t.id))})}return this.addToast(c,a),l};addToast(t,s){this.setState({visibleToasts:[t,...this.state.visibleToasts.filter(t=>!t.isExiting)]}),this.scheduleTimeout(t.id,s,0),this.rescheduleAllTimeouts()}scheduleTimeout(t,s,e){const i=this.timeouts.get(t);i&&clearTimeout(i);const o=setTimeout(()=>{this.hide(t)},s*(e+1));this.timeouts.set(t,o)}rescheduleAllTimeouts(){const{visibleToasts:t}=this.state;t.forEach((t,s)=>{t.isExiting||0===s||this.scheduleTimeout(t.id,t.duration,s)})}hide=t=>{const{visibleToasts:s}=this.state,e=s.find(s=>s.id===t);if(!e||e.isExiting)return;const i=this.timeouts.get(t);i&&(clearTimeout(i),this.timeouts.delete(t)),this.setState({visibleToasts:s.map(s=>s.id===t?{...s,isExiting:!0}:s)}),setTimeout(()=>{this.removeToast(t)},350)};removeToast(t){const s=this.timeouts.get(t);s&&(clearTimeout(s),this.timeouts.delete(t)),this.setState({visibleToasts:this.state.visibleToasts.filter(s=>s.id!==t)}),this.rescheduleAllTimeouts()}updateToast=(t,s)=>{const{visibleToasts:e}=this.state,i=e.findIndex(s=>s.id===t);-1!==i&&(this.setState({visibleToasts:e.map(e=>e.id===t?{...e,...s}:e)}),void 0!==s.duration&&this.scheduleTimeout(t,s.duration,i))};hideAll=()=>{for(const t of this.timeouts.values())clearTimeout(t);this.timeouts.clear(),this.setState({visibleToasts:[]})}};
+"use strict";
+
+const EXIT_DURATION = 350;
+const DEFAULT_THEME = {
+  position: "top",
+  offset: 0,
+  rtl: false,
+  stacking: true,
+  maxStack: 3,
+  dismissible: true,
+  showCloseButton: true,
+  colors: {
+    success: {
+      accent: "#28B770",
+      background: "#FFFFFF"
+    },
+    error: {
+      accent: "#F05964",
+      background: "#FFFFFF"
+    },
+    info: {
+      accent: "#EDBE43",
+      background: "#FFFFFF"
+    },
+    loading: {
+      accent: "#232323",
+      background: "#FFFFFF"
+    }
+  },
+  icons: {},
+  toastStyle: {},
+  titleStyle: {},
+  descriptionStyle: {},
+  defaultDuration: 4000
+};
+function mergeConfig(config) {
+  if (!config) return DEFAULT_THEME;
+  const mergedColors = {
+    ...DEFAULT_THEME.colors
+  };
+  if (config.colors) {
+    for (const type of Object.keys(config.colors)) {
+      const userColors = config.colors[type];
+      if (userColors) {
+        mergedColors[type] = {
+          ...DEFAULT_THEME.colors[type],
+          ...userColors
+        };
+      }
+    }
+  }
+  return {
+    position: config.position ?? DEFAULT_THEME.position,
+    offset: config.offset ?? DEFAULT_THEME.offset,
+    rtl: config.rtl ?? DEFAULT_THEME.rtl,
+    stacking: config.stacking ?? DEFAULT_THEME.stacking,
+    maxStack: config.maxStack ?? DEFAULT_THEME.maxStack,
+    dismissible: config.dismissible ?? DEFAULT_THEME.dismissible,
+    showCloseButton: config.showCloseButton ?? DEFAULT_THEME.showCloseButton,
+    colors: mergedColors,
+    icons: {
+      ...DEFAULT_THEME.icons,
+      ...config.icons
+    },
+    toastStyle: {
+      ...DEFAULT_THEME.toastStyle,
+      ...config.toastStyle
+    },
+    titleStyle: {
+      ...DEFAULT_THEME.titleStyle,
+      ...config.titleStyle
+    },
+    descriptionStyle: {
+      ...DEFAULT_THEME.descriptionStyle,
+      ...config.descriptionStyle
+    },
+    defaultDuration: config.defaultDuration ?? DEFAULT_THEME.defaultDuration
+  };
+}
+class ToastStore {
+  state = {
+    visibleToasts: []
+  };
+  theme = DEFAULT_THEME;
+  listeners = new Set();
+  toastIdCounter = 0;
+  timeouts = new Map();
+  subscribe = listener => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  emit() {
+    for (const listener of this.listeners) {
+      listener(this.state);
+    }
+  }
+  setState(partial) {
+    this.state = {
+      ...this.state,
+      ...partial
+    };
+    this.emit();
+  }
+  getState = () => this.state;
+  getTheme = () => this.theme;
+  setConfig = config => {
+    this.theme = mergeConfig(config);
+  };
+  show = (title, description, type = "success", duration, options) => {
+    const actualDuration = duration ?? options?.duration ?? this.theme.defaultDuration;
+    const maxToasts = this.theme.stacking ? this.theme.maxStack : 1;
+    const id = `toast-${++this.toastIdCounter}`;
+    const newToast = {
+      id,
+      title,
+      description: description ?? options?.description,
+      type,
+      duration: actualDuration,
+      createdAt: Date.now(),
+      isExiting: false,
+      options
+    };
+    const {
+      visibleToasts
+    } = this.state;
+    const activeToasts = visibleToasts.filter(t => !t.isExiting);
+    if (activeToasts.length >= maxToasts) {
+      const toastsToRemove = activeToasts.slice(maxToasts - 1);
+      for (const toast of toastsToRemove) {
+        const timeout = this.timeouts.get(toast.id);
+        if (timeout) {
+          clearTimeout(timeout);
+          this.timeouts.delete(toast.id);
+        }
+      }
+      const removeIds = new Set(toastsToRemove.map(t => t.id));
+      if (this.theme.stacking) {
+        this.setState({
+          visibleToasts: visibleToasts.filter(t => !removeIds.has(t.id))
+        });
+      } else {
+        this.setState({
+          visibleToasts: visibleToasts.map(t => removeIds.has(t.id) ? {
+            ...t,
+            isExiting: true
+          } : t)
+        });
+        setTimeout(() => {
+          for (const toast of toastsToRemove) {
+            this.removeToast(toast.id);
+          }
+          this.addToast(newToast, actualDuration);
+        }, EXIT_DURATION - 220);
+        return id;
+      }
+    }
+    this.addToast(newToast, actualDuration);
+    return id;
+  };
+  addToast(toast, duration) {
+    this.setState({
+      visibleToasts: [toast, ...this.state.visibleToasts.filter(t => !t.isExiting)]
+    });
+    this.scheduleTimeout(toast.id, duration, 0);
+    this.rescheduleAllTimeouts();
+  }
+  scheduleTimeout(id, baseDuration, index) {
+    const existingTimeout = this.timeouts.get(id);
+    if (existingTimeout) {
+      clearTimeout(existingTimeout);
+    }
+    const duration = baseDuration * (index + 1);
+    const timeout = setTimeout(() => {
+      this.hide(id);
+    }, duration);
+    this.timeouts.set(id, timeout);
+  }
+  rescheduleAllTimeouts() {
+    const {
+      visibleToasts
+    } = this.state;
+    visibleToasts.forEach((toast, index) => {
+      if (toast.isExiting || index === 0) return;
+      this.scheduleTimeout(toast.id, toast.duration, index);
+    });
+  }
+  hide = id => {
+    const {
+      visibleToasts
+    } = this.state;
+    const toast = visibleToasts.find(t => t.id === id);
+    if (!toast || toast.isExiting) return;
+    const timeout = this.timeouts.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.timeouts.delete(id);
+    }
+    this.setState({
+      visibleToasts: visibleToasts.map(t => t.id === id ? {
+        ...t,
+        isExiting: true
+      } : t)
+    });
+    setTimeout(() => {
+      this.removeToast(id);
+    }, EXIT_DURATION);
+  };
+  removeToast(id) {
+    const timeout = this.timeouts.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.timeouts.delete(id);
+    }
+    this.setState({
+      visibleToasts: this.state.visibleToasts.filter(t => t.id !== id)
+    });
+    this.rescheduleAllTimeouts();
+  }
+  updateToast = (id, data) => {
+    const {
+      visibleToasts
+    } = this.state;
+    const index = visibleToasts.findIndex(t => t.id === id);
+    if (index === -1) return;
+    this.setState({
+      visibleToasts: visibleToasts.map(t => t.id === id ? {
+        ...t,
+        ...data
+      } : t)
+    });
+    if (data.duration !== undefined) {
+      this.scheduleTimeout(id, data.duration, index);
+    }
+  };
+  hideAll = () => {
+    for (const timeout of this.timeouts.values()) {
+      clearTimeout(timeout);
+    }
+    this.timeouts.clear();
+    this.setState({
+      visibleToasts: []
+    });
+  };
+}
+export const toastStore = new ToastStore();
+//# sourceMappingURL=toast-store.js.map

package/lib/module/toast.js

@@ -1 +1,345 @@
-"use strict";import{memo as t,useCallback as e,useEffect as o,useMemo as i,useState as n}from"react";import{Pressable as s,StyleSheet as a,Text as r,View as l}from"react-native";import{Gesture as c,GestureDetector as u}from"react-native-gesture-handler";import d,{interpolate as p,useAnimatedStyle as m,useSharedValue as g,withTiming as h}from"react-native-reanimated";import{useSafeAreaInsets as f}from"react-native-safe-area-context";import{scheduleOnRN as v}from"react-native-worklets";import{DISMISS_THRESHOLD as x,DISMISS_VELOCITY_THRESHOLD as y,EASING as T,ENTRY_DURATION as w,ENTRY_OFFSET as C,EXIT_DURATION as b,EXIT_OFFSET as Y,ICON_ANIMATION_DURATION as k,MAX_DRAG_CLAMP as I,MAX_DRAG_RESISTANCE as S,SPRING_BACK_DURATION as j,STACK_OFFSET_PER_ITEM as z,STACK_SCALE_PER_ITEM as B,STACK_TRANSITION_DURATION as E,SWIPE_EXIT_OFFSET as M}from"./constants.js";import{CloseIcon as H}from"./icons/index.js";import{animationPool as R,getSlotIndex as F,releaseSlot as V,slotTrackers as D}from"./pool.js";import{AnimatedIcon as W,resolveIcon as A}from"./toast-icons.js";import{toastStore as O}from"./toast-store.js";import{useToastState as P}from"./use-toast-state.js";import{jsx as L,jsxs as U}from"react/jsx-runtime";export const ToastContainer=()=>{const{top:t,bottom:o}=f(),{visibleToasts:n,theme:s,toastsWithIndex:a,isBottom:r,topToastRef:d,isBottomRef:p,isDismissibleRef:m}=P(),w=g(!1),C=i(()=>c.Pan().onStart(()=>{"worklet";w.set(!1)}).onUpdate(t=>{"worklet";if(!m.current.value)return;const e=d.current.value;if(!e)return;const{slot:o}=e,i=p.current.value,n=t.translationY,s=i?n:-n,a=i?-n:n;if(s>0){const e=i?Math.min(n,I):Math.max(n,-I);o.translationY.value=e;const a=s>x||(i?t.velocityY>y:t.velocityY<-y);w.set(a)}else{const t=S*(1-Math.exp(-a/250));o.translationY.value=i?-Math.min(t,S):Math.min(t,S),w.value=!1}}).onEnd(()=>{"worklet";if(!m.current.value)return;const t=d.current.value;if(!t)return;const{slot:e}=t,o=p.current.value;if(w.value){e.progress.value=h(0,{duration:b,easing:T});const i=o?M:-M;e.translationY.value=h(e.translationY.value+i,{duration:b,easing:T}),v(t.dismiss)}else e.translationY.value=h(0,{duration:j,easing:T})}),[w,m,d,p]),Y=e(t=>{d.current.value=t},[d]);if(0===n.length)return null;const k=r?o:t,z=r?{bottom:k+s.offset+2}:{top:k+s.offset+2};return L(u,{gesture:C,children:L(l,{style:[G.container,z],pointerEvents:"box-none",children:a.map(({toast:t,index:e})=>L(q,{toast:t,index:e,theme:s,position:s.position,isTopToast:0===e,registerTopToast:Y},t.id))})})};const q=t(({toast:t,index:i,theme:a,position:c,isTopToast:u,registerTopToast:g})=>{const[f]=n(()=>F(t.id)),v=R[f],x=D[f],y="bottom"===c,I=y?C:-C,S=y?Y:-Y,[j,M]=n("loading"===t.type),[P,q]=n(!1);o(()=>{v.progress.value=0,v.translationY.value=0,v.stackIndex.value=i,v.progress.value=h(1,{duration:w,easing:T});const e=setTimeout(()=>q(!0),50);return()=>{clearTimeout(e),V(t.id)}},[]);const J=e(()=>{O.hide(t.id)},[t.id]);o(()=>{let e=null;return t.isExiting&&!x.wasExiting&&(x.wasExiting=!0,v.progress.value=h(0,{duration:b,easing:T}),v.translationY.value=h(S,{duration:b,easing:T})),x.initialized&&i!==x.prevIndex&&(v.stackIndex.value=h(i,{duration:E,easing:T})),x.prevIndex=i,x.initialized=!0,"loading"===t.type?M(!0):j&&(e=setTimeout(()=>M(!1),k+50)),u&&g({slot:v,dismiss:J}),()=>{e&&clearTimeout(e),u&&g(null)}},[t.isExiting,i,v,x,S,t.type,j,u,g,J]);const K=j&&"loading"!==t.type,N=m(()=>{const t=p(v.progress.value,[0,1],[I,0]),e=y?v.stackIndex.value*z:v.stackIndex.value*-z,o=1-v.stackIndex.value*B,i=t+v.translationY.value+e,n=p(v.progress.value,[0,1],[0,1]),s=y?v.translationY.value:-v.translationY.value,a=n*(s>0?p(s,[0,130],[1,0],"clamp"):1);return{transform:[{translateY:i},{scale:o*p(Math.abs(v.translationY.value),[0,50],[1,.98],"clamp")}],opacity:a,zIndex:1e3-Math.round(v.stackIndex.value)}}),{options:Q}=t,X=a.colors[t.type];if(void 0!==Q?.customContent){const e=Q.customContent;return L(d.View,{style:[G.toast,G.customContentToast,y?G.toastBottom:G.toastTop,{backgroundColor:X.background},a.toastStyle,Q.style,N],children:"function"==typeof e?e({id:t.id,dismiss:J,type:t.type,isExiting:!!t.isExiting}):e})}const Z="loading"!==t.type&&(Q?.showCloseButton??a.showCloseButton);return U(d.View,{style:[G.toast,y?G.toastBottom:G.toastTop,{backgroundColor:X.background},a.rtl&&G.rtl,a.toastStyle,Q?.style,N],children:[L(l,{style:G.iconContainer,children:P&&(K?L(W,{type:t.type,color:X.accent,custom:Q?.icon,config:a.icons[t.type]},t.type):A(t.type,X.accent,Q?.icon,a.icons[t.type]))}),U(l,{style:G.textContainer,children:[L(r,{maxFontSizeMultiplier:1.35,allowFontScaling:!1,style:[G.title,{color:X.accent},a.rtl&&{textAlign:"right"},a.titleStyle,Q?.titleStyle],children:t.title}),t.description&&L(r,{allowFontScaling:!1,maxFontSizeMultiplier:1.35,style:[G.description,a.rtl&&{textAlign:"right"},a.descriptionStyle,Q?.descriptionStyle],children:t.description})]}),Z&&L(s,{style:G.closeButton,onPress:J,hitSlop:12,children:L(H,{width:20,height:20})})]})},(t,e)=>t.toast.id===e.toast.id&&t.toast.type===e.toast.type&&t.toast.title===e.toast.title&&t.toast.description===e.toast.description&&t.toast.isExiting===e.toast.isExiting&&t.index===e.index&&t.position===e.position&&t.theme===e.theme&&t.isTopToast===e.isTopToast),G=a.create({container:{position:"absolute",left:16,right:16,zIndex:1e3},toast:{flexDirection:"row",alignItems:"center",gap:12,minHeight:36,borderRadius:20,borderCurve:"continuous",position:"absolute",left:0,right:0,paddingHorizontal:12,paddingVertical:10,shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.05,shadowRadius:24,elevation:8},customContentToast:{padding:0,paddingHorizontal:0,paddingVertical:0,overflow:"hidden"},rtl:{flexDirection:"row-reverse"},toastTop:{top:0},toastBottom:{bottom:0},iconContainer:{width:48,height:48,alignItems:"center",justifyContent:"center",marginLeft:8},textContainer:{flex:1,gap:1,justifyContent:"center"},title:{fontSize:14,fontWeight:"700",lineHeight:20},description:{color:"#6B7280",fontSize:12,fontWeight:"500",lineHeight:16},closeButton:{padding:4,alignItems:"center",justifyContent:"center"}});
+"use strict";
+
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { scheduleOnRN } from "react-native-worklets";
+import { DISMISS_THRESHOLD, DISMISS_VELOCITY_THRESHOLD, EASING, ENTRY_DURATION, ENTRY_OFFSET, EXIT_DURATION, EXIT_OFFSET, ICON_ANIMATION_DURATION, MAX_DRAG_CLAMP, MAX_DRAG_RESISTANCE, SPRING_BACK_DURATION, STACK_OFFSET_PER_ITEM, STACK_SCALE_PER_ITEM, STACK_TRANSITION_DURATION, SWIPE_EXIT_OFFSET } from "./constants.js";
+import { CloseIcon } from "./icons/index.js";
+import { animationPool, getSlotIndex, releaseSlot, slotTrackers } from "./pool.js";
+import { AnimatedIcon, resolveIcon } from "./toast-icons.js";
+import { toastStore } from "./toast-store.js";
+import { useToastState } from "./use-toast-state.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ToastContainer = () => {
+  const {
+    top,
+    bottom
+  } = useSafeAreaInsets();
+  const {
+    visibleToasts,
+    theme,
+    toastsWithIndex,
+    isBottom,
+    topToastRef,
+    isBottomRef,
+    isDismissibleRef
+  } = useToastState();
+  const shouldDismiss = useSharedValue(false);
+  const panGesture = useMemo(() => Gesture.Pan().onStart(() => {
+    "worklet";
+
+    shouldDismiss.set(false);
+  }).onUpdate(event => {
+    "worklet";
+
+    if (!isDismissibleRef.current.value) return;
+    const ref = topToastRef.current.value;
+    if (!ref) return;
+    const {
+      slot
+    } = ref;
+    const bottom = isBottomRef.current.value;
+    const rawY = event.translationY;
+    const dismissDrag = bottom ? rawY : -rawY;
+    const resistDrag = bottom ? -rawY : rawY;
+    if (dismissDrag > 0) {
+      const clampedY = bottom ? Math.min(rawY, MAX_DRAG_CLAMP) : Math.max(rawY, -MAX_DRAG_CLAMP);
+      slot.translationY.value = clampedY;
+      const shouldTriggerDismiss = dismissDrag > DISMISS_THRESHOLD || (bottom ? event.velocityY > DISMISS_VELOCITY_THRESHOLD : event.velocityY < -DISMISS_VELOCITY_THRESHOLD);
+      shouldDismiss.set(shouldTriggerDismiss);
+    } else {
+      const exponentialDrag = MAX_DRAG_RESISTANCE * (1 - Math.exp(-resistDrag / 250));
+      slot.translationY.value = bottom ? -Math.min(exponentialDrag, MAX_DRAG_RESISTANCE) : Math.min(exponentialDrag, MAX_DRAG_RESISTANCE);
+      shouldDismiss.value = false;
+    }
+  }).onEnd(() => {
+    "worklet";
+
+    if (!isDismissibleRef.current.value) return;
+    const ref = topToastRef.current.value;
+    if (!ref) return;
+    const {
+      slot
+    } = ref;
+    const bottom = isBottomRef.current.value;
+    if (shouldDismiss.value) {
+      slot.progress.value = withTiming(0, {
+        duration: EXIT_DURATION,
+        easing: EASING
+      });
+      const exitOffset = bottom ? SWIPE_EXIT_OFFSET : -SWIPE_EXIT_OFFSET;
+      slot.translationY.value = withTiming(slot.translationY.value + exitOffset, {
+        duration: EXIT_DURATION,
+        easing: EASING
+      });
+      scheduleOnRN(ref.dismiss);
+    } else {
+      slot.translationY.value = withTiming(0, {
+        duration: SPRING_BACK_DURATION,
+        easing: EASING
+      });
+    }
+  }), [shouldDismiss, isDismissibleRef, topToastRef, isBottomRef]);
+  const registerTopToast = useCallback(values => {
+    topToastRef.current.value = values;
+  }, [topToastRef]);
+  if (visibleToasts.length === 0) return null;
+  const inset = isBottom ? bottom : top;
+  const positionStyle = isBottom ? {
+    bottom: inset + theme.offset + 2
+  } : {
+    top: inset + theme.offset + 2
+  };
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: panGesture,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.container, positionStyle],
+      pointerEvents: "box-none",
+      children: toastsWithIndex.map(({
+        toast,
+        index
+      }) => /*#__PURE__*/_jsx(MemoizedToastItem, {
+        toast: toast,
+        index: index,
+        theme: theme,
+        position: theme.position,
+        isTopToast: index === 0,
+        registerTopToast: registerTopToast
+      }, toast.id))
+    })
+  });
+};
+const ToastItem = ({
+  toast,
+  index,
+  theme,
+  position,
+  isTopToast,
+  registerTopToast
+}) => {
+  const [slotIdx] = useState(() => getSlotIndex(toast.id));
+  const slot = animationPool[slotIdx];
+  const tracker = slotTrackers[slotIdx];
+  const isBottom = position === "bottom";
+  const entryFromY = isBottom ? ENTRY_OFFSET : -ENTRY_OFFSET;
+  const exitToY = isBottom ? EXIT_OFFSET : -EXIT_OFFSET;
+  const [wasLoading, setWasLoading] = useState(toast.type === "loading");
+  const [showIcon, setShowIcon] = useState(false);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only effect
+  useEffect(() => {
+    slot.progress.value = 0;
+    slot.translationY.value = 0;
+    slot.stackIndex.value = index;
+    slot.progress.value = withTiming(1, {
+      duration: ENTRY_DURATION,
+      easing: EASING
+    });
+    const iconTimeout = setTimeout(() => setShowIcon(true), 50);
+    return () => {
+      clearTimeout(iconTimeout);
+      releaseSlot(toast.id);
+    };
+  }, []);
+  const dismissToast = useCallback(() => {
+    toastStore.hide(toast.id);
+  }, [toast.id]);
+  useEffect(() => {
+    let loadingTimeout = null;
+    if (toast.isExiting && !tracker.wasExiting) {
+      tracker.wasExiting = true;
+      slot.progress.value = withTiming(0, {
+        duration: EXIT_DURATION,
+        easing: EASING
+      });
+      slot.translationY.value = withTiming(exitToY, {
+        duration: EXIT_DURATION,
+        easing: EASING
+      });
+    }
+    if (tracker.initialized && index !== tracker.prevIndex) {
+      slot.stackIndex.value = withTiming(index, {
+        duration: STACK_TRANSITION_DURATION,
+        easing: EASING
+      });
+    }
+    tracker.prevIndex = index;
+    tracker.initialized = true;
+    if (toast.type === "loading") {
+      setWasLoading(true);
+    } else if (wasLoading) {
+      loadingTimeout = setTimeout(() => setWasLoading(false), ICON_ANIMATION_DURATION + 50);
+    }
+    if (isTopToast) {
+      registerTopToast({
+        slot: slot,
+        dismiss: dismissToast
+      });
+    }
+    return () => {
+      if (loadingTimeout) clearTimeout(loadingTimeout);
+      if (isTopToast) registerTopToast(null);
+    };
+  }, [toast.isExiting, index, slot, tracker, exitToY, toast.type, wasLoading, isTopToast, registerTopToast, dismissToast]);
+  const shouldAnimateIcon = wasLoading && toast.type !== "loading";
+  const animatedStyle = useAnimatedStyle(() => {
+    const baseTranslateY = interpolate(slot.progress.value, [0, 1], [entryFromY, 0]);
+    const stackOffsetY = isBottom ? slot.stackIndex.value * STACK_OFFSET_PER_ITEM : slot.stackIndex.value * -STACK_OFFSET_PER_ITEM;
+    const stackScale = 1 - slot.stackIndex.value * STACK_SCALE_PER_ITEM;
+    const finalTranslateY = baseTranslateY + slot.translationY.value + stackOffsetY;
+    const progressOpacity = interpolate(slot.progress.value, [0, 1], [0, 1]);
+    const dismissDirection = isBottom ? slot.translationY.value : -slot.translationY.value;
+    const dragOpacity = dismissDirection > 0 ? interpolate(dismissDirection, [0, 130], [1, 0], "clamp") : 1;
+    const opacity = progressOpacity * dragOpacity;
+    const dragScale = interpolate(Math.abs(slot.translationY.value), [0, 50], [1, 0.98], "clamp");
+    const scale = stackScale * dragScale;
+    return {
+      transform: [{
+        translateY: finalTranslateY
+      }, {
+        scale
+      }],
+      opacity,
+      zIndex: 1000 - Math.round(slot.stackIndex.value)
+    };
+  });
+  const {
+    options
+  } = toast;
+  const colors = theme.colors[toast.type];
+  if (options?.customContent !== undefined) {
+    const content = options.customContent;
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.toast, styles.customContentToast, isBottom ? styles.toastBottom : styles.toastTop, {
+        backgroundColor: colors.background
+      }, theme.toastStyle, options.style, animatedStyle],
+      children: typeof content === "function" ? content({
+        id: toast.id,
+        dismiss: dismissToast,
+        type: toast.type,
+        isExiting: !!toast.isExiting
+      }) : content
+    });
+  }
+  const shouldShowCloseButton = toast.type !== "loading" && (options?.showCloseButton ?? theme.showCloseButton);
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.toast, isBottom ? styles.toastBottom : styles.toastTop, {
+      backgroundColor: colors.background
+    }, theme.rtl && styles.rtl, theme.toastStyle, options?.style, animatedStyle],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.iconContainer,
+      children: showIcon && (shouldAnimateIcon ? /*#__PURE__*/_jsx(AnimatedIcon, {
+        type: toast.type,
+        color: colors.accent,
+        custom: options?.icon,
+        config: theme.icons[toast.type]
+      }, toast.type) : resolveIcon(toast.type, colors.accent, options?.icon, theme.icons[toast.type]))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.textContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        maxFontSizeMultiplier: 1.35,
+        allowFontScaling: false,
+        style: [styles.title, {
+          color: colors.accent
+        }, theme.rtl && {
+          textAlign: "right"
+        }, theme.titleStyle, options?.titleStyle],
+        children: toast.title
+      }), toast.description && /*#__PURE__*/_jsx(Text, {
+        allowFontScaling: false,
+        maxFontSizeMultiplier: 1.35,
+        style: [styles.description, theme.rtl && {
+          textAlign: "right"
+        }, theme.descriptionStyle, options?.descriptionStyle],
+        children: toast.description
+      })]
+    }), shouldShowCloseButton && /*#__PURE__*/_jsx(Pressable, {
+      style: styles.closeButton,
+      onPress: dismissToast,
+      hitSlop: 12,
+      children: /*#__PURE__*/_jsx(CloseIcon, {
+        width: 20,
+        height: 20
+      })
+    })]
+  });
+};
+const MemoizedToastItem = /*#__PURE__*/memo(ToastItem, (prev, next) => {
+  return prev.toast.id === next.toast.id && prev.toast.type === next.toast.type && prev.toast.title === next.toast.title && prev.toast.description === next.toast.description && prev.toast.isExiting === next.toast.isExiting && prev.index === next.index && prev.position === next.position && prev.theme === next.theme && prev.isTopToast === next.isTopToast;
+});
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 16,
+    right: 16,
+    zIndex: 1000
+  },
+  toast: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minHeight: 36,
+    borderRadius: 20,
+    borderCurve: "continuous",
+    position: "absolute",
+    left: 0,
+    right: 0,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 8
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 24,
+    elevation: 8
+  },
+  customContentToast: {
+    padding: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    overflow: "hidden"
+  },
+  rtl: {
+    flexDirection: "row-reverse"
+  },
+  toastTop: {
+    top: 0
+  },
+  toastBottom: {
+    bottom: 0
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: 8
+  },
+  textContainer: {
+    flex: 1,
+    gap: 1,
+    justifyContent: "center"
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "700",
+    lineHeight: 20
+  },
+  description: {
+    color: "#6B7280",
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 16
+  },
+  closeButton: {
+    padding: 4,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+//# sourceMappingURL=toast.js.map

package/lib/module/types.js

@@ -1 +1,4 @@
-"use strict";export{};
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/use-toast-state.js

@@ -1 +1,67 @@
-"use strict";import{useEffect as t,useMemo as i,useRef as s,useState as e}from"react";import{makeMutable as o}from"react-native-reanimated";import{toastStore as n}from"./toast-store.js";export const useToastState=()=>{const[r,l]=e([]),[m,a]=e(()=>n.getTheme()),u=s(o(null)),b=s(o("bottom"===m.position)),c=s(o(!0)),p="bottom"===m.position,d=r.find(t=>!t.isExiting),f=d?.options?.dismissible??m.dismissible;t(()=>{const t=n.getState().visibleToasts,i=n.getTheme();l(t);const s=t.find(t=>!t.isExiting);b.current.value="bottom"===i.position,c.current.value=s?.options?.dismissible??i.dismissible;let e=null,o=null;const r=n.subscribe(t=>{e=t.visibleToasts,null===o&&(o=requestAnimationFrame(()=>{const t=e??n.getState().visibleToasts,i=n.getTheme();e&&(l(e),e=null),o=null,a(t=>t===i?t:i);const s=t.find(t=>!t.isExiting);b.current.value="bottom"===i.position,c.current.value=s?.options?.dismissible??i.dismissible}))});return r},[]);const g=i(()=>{const t=new Map;let i=0;for(const s of r)t.set(s.id,s.isExiting?-1:i),s.isExiting||i++;return[...r].reverse().map(i=>({toast:i,index:t.get(i.id)??0}))},[r]);return{visibleToasts:r,theme:m,toastsWithIndex:g,isBottom:p,isTopDismissible:f,topToastRef:u,isBottomRef:b,isDismissibleRef:c}};
+"use strict";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { makeMutable } from "react-native-reanimated";
+import { toastStore } from "./toast-store.js";
+export const useToastState = () => {
+  const [visibleToasts, setVisibleToasts] = useState([]);
+  const [theme, setTheme] = useState(() => toastStore.getTheme());
+  const topToastRef = useRef(makeMutable(null));
+  const isBottomRef = useRef(makeMutable(theme.position === "bottom"));
+  const isDismissibleRef = useRef(makeMutable(true));
+  const isBottom = theme.position === "bottom";
+  const topToast = visibleToasts.find(t => !t.isExiting);
+  const isTopDismissible = topToast?.options?.dismissible ?? theme.dismissible;
+  useEffect(() => {
+    const initialToasts = toastStore.getState().visibleToasts;
+    const initialTheme = toastStore.getTheme();
+    setVisibleToasts(initialToasts);
+    const initialTopToast = initialToasts.find(t => !t.isExiting);
+    isBottomRef.current.value = initialTheme.position === "bottom";
+    isDismissibleRef.current.value = initialTopToast?.options?.dismissible ?? initialTheme.dismissible;
+    let pendingToasts = null;
+    let rafId = null;
+    const unsubscribe = toastStore.subscribe(state => {
+      pendingToasts = state.visibleToasts;
+      if (rafId === null) {
+        rafId = requestAnimationFrame(() => {
+          const currentToasts = pendingToasts ?? toastStore.getState().visibleToasts;
+          const currentTheme = toastStore.getTheme();
+          if (pendingToasts) {
+            setVisibleToasts(pendingToasts);
+            pendingToasts = null;
+          }
+          rafId = null;
+          setTheme(prev => prev === currentTheme ? prev : currentTheme);
+          const topToast = currentToasts.find(t => !t.isExiting);
+          isBottomRef.current.value = currentTheme.position === "bottom";
+          isDismissibleRef.current.value = topToast?.options?.dismissible ?? currentTheme.dismissible;
+        });
+      }
+    });
+    return unsubscribe;
+  }, []);
+  const toastsWithIndex = useMemo(() => {
+    const indices = new Map();
+    let visualIndex = 0;
+    for (const t of visibleToasts) {
+      indices.set(t.id, t.isExiting ? -1 : visualIndex);
+      if (!t.isExiting) visualIndex++;
+    }
+    return [...visibleToasts].reverse().map(t => ({
+      toast: t,
+      index: indices.get(t.id) ?? 0
+    }));
+  }, [visibleToasts]);
+  return {
+    visibleToasts,
+    theme,
+    toastsWithIndex,
+    isBottom,
+    isTopDismissible,
+    topToastRef,
+    isBottomRef,
+    isDismissibleRef
+  };
+};
+//# sourceMappingURL=use-toast-state.js.map