react-native-bread 0.5.2 → 0.6.0

package/lib/module/toast-api.js

@@ -1 +1,123 @@
-"use strict";import{scheduleOnRN as t}from"react-native-worklets";import{toastStore as o}from"./toast-store.js";const s=t=>t?"string"==typeof t?{description:t}:{description:t.description,duration:t.duration,options:t}:{},i=t=>"string"==typeof t?{title:t}:t,r=(t,s)=>{const r=i(t.loading);s(o.show(r.title,r.description,"loading",r.duration??36e5))},n=(t,s)=>{const r=i(s.success);o.updateToast(t,{title:r.title,description:r.description,type:"success",duration:r.duration??4e3})},e=(t,s,r)=>{const n=((t,o)=>i("function"==typeof t?t(o):t))(s.error,r);o.updateToast(t,{title:n.title,description:n.description,type:"error",duration:n.duration??4e3})},c=(t,s,i,r)=>{o.show(t,s,i,r)};c.custom=(t,s)=>{const i=s?.type??"info";return o.show("",void 0,i,s?.duration,{...s,customContent:t})},c.success=(t,i,r)=>{const{description:n,duration:e,options:c}=s(i);o.show(t,n,"success",r??e,c)},c.error=(t,i,r)=>{const{description:n,duration:e,options:c}=s(i);o.show(t,n,"error",r??e,c)},c.info=(t,i,r)=>{const{description:n,duration:e,options:c}=s(i);o.show(t,n,"info",r??e,c)},c.promise=async(o,s)=>{let i="";await new Promise(o=>{t(r,s,t=>{i=t,o()})});try{const r=await o;return t(n,i,s),{data:r,success:!0}}catch(o){const r=o instanceof Error?o:new Error(String(o));return t(e,i,s,r),{error:r,success:!1}}},c.dismiss=t=>{o.hide(t)},c.dismissAll=()=>{o.hideAll()};export const toast=c;
+"use strict";
+
+import { toastStore } from "./toast-store.js";
+const _toast = (title, description, type, duration) => {
+  toastStore.show(title, description, type, duration);
+};
+const parseDescriptionOrOptions = arg => {
+  if (!arg) return {};
+  if (typeof arg === "string") return {
+    description: arg
+  };
+  return {
+    description: arg.description,
+    duration: arg.duration,
+    options: arg
+  };
+};
+const parseMessage = input => typeof input === "string" ? {
+  title: input
+} : input;
+const parseErrorMessage = (input, error) => {
+  if (typeof input === "function") {
+    return parseMessage(input(error));
+  }
+  return parseMessage(input);
+};
+const promiseToast = async (promise, messages) => {
+  const loadingCfg = parseMessage(messages.loading);
+  const toastId = toastStore.show(loadingCfg.title, loadingCfg.description, "loading", loadingCfg.duration ?? 60 * 60 * 1000);
+  try {
+    const result = await promise;
+    const successCfg = parseMessage(messages.success);
+    toastStore.updateToast(toastId, {
+      title: successCfg.title,
+      description: successCfg.description,
+      type: "success",
+      duration: successCfg.duration ?? 4000
+    });
+    return {
+      data: result,
+      success: true
+    };
+  } catch (err) {
+    const error = err instanceof Error ? err : new Error(String(err));
+    const errorCfg = parseErrorMessage(messages.error, error);
+    toastStore.updateToast(toastId, {
+      title: errorCfg.title,
+      description: errorCfg.description,
+      type: "error",
+      duration: errorCfg.duration ?? 4000
+    });
+    return {
+      error,
+      success: false
+    };
+  }
+};
+const toastFn = _toast;
+toastFn.custom = (content, options) => {
+  const type = options?.type ?? "info";
+  return toastStore.show("", undefined, type, options?.duration, {
+    ...options,
+    customContent: content
+  });
+};
+toastFn.success = (title, descriptionOrOptions, duration) => {
+  const {
+    description,
+    duration: optDuration,
+    options
+  } = parseDescriptionOrOptions(descriptionOrOptions);
+  toastStore.show(title, description, "success", duration ?? optDuration, options);
+};
+toastFn.error = (title, descriptionOrOptions, duration) => {
+  const {
+    description,
+    duration: optDuration,
+    options
+  } = parseDescriptionOrOptions(descriptionOrOptions);
+  toastStore.show(title, description, "error", duration ?? optDuration, options);
+};
+toastFn.info = (title, descriptionOrOptions, duration) => {
+  const {
+    description,
+    duration: optDuration,
+    options
+  } = parseDescriptionOrOptions(descriptionOrOptions);
+  toastStore.show(title, description, "info", duration ?? optDuration, options);
+};
+toastFn.promise = promiseToast;
+toastFn.dismiss = id => {
+  toastStore.hide(id);
+};
+toastFn.dismissAll = () => {
+  toastStore.hideAll();
+};
+
+/**
+ * Toast API for showing notifications.
+ *
+ * @example
+ * ```ts
+ * import { toast } from 'react-native-bread';
+ *
+ * // Basic toasts
+ * toast.success("Saved!", "Your changes have been saved");
+ * toast.error("Error", "Something went wrong");
+ * toast.info("Tip", "Swipe up to dismiss");
+ *
+ * // Promise toast (loading → success/error)
+ * toast.promise(apiCall(), {
+ *   loading: { title: "Loading..." },
+ *   success: { title: "Done!" },
+ *   error: (err) => ({ title: "Failed", description: err.message }),
+ * });
+ *
+ * // Dismiss toasts
+ * toast.dismiss(id);
+ * toast.dismissAll();
+ * ```
+ */
+export const toast = toastFn;
+//# sourceMappingURL=toast-api.js.map

package/lib/module/toast-icons.js

@@ -1 +1,74 @@
-"use strict";import{memo as t,useEffect as e}from"react";import{ActivityIndicator as r}from"react-native";import o,{Easing as i,useAnimatedStyle as c,useSharedValue as n,withTiming as s}from"react-native-reanimated";import{ICON_ANIMATION_DURATION as a,ICON_SIZE as l}from"./constants.js";import{GreenCheck as u,InfoIcon as f,RedX as m}from"./icons/index.js";import{jsx as h}from"react/jsx-runtime";export const resolveIcon=(t,e,o,i)=>{if(o)return"function"==typeof o?o({color:e,size:l}):o;if(i)return i({color:e,size:l});switch(t){case"success":default:return h(u,{width:36,height:36,fill:e});case"error":return h(m,{width:l,height:l,fill:e});case"loading":return h(r,{size:l,color:e});case"info":return h(f,{width:l,height:l,fill:e})}};export const AnimatedIcon=t(({type:t,color:r,custom:l,config:u})=>{const f=n(0);e(()=>{f.value=s(1,{duration:a,easing:i.out(i.back(1.5))})},[f]);const m=c(()=>({opacity:f.value,transform:[{scale:.7+.3*f.value}]}));return h(o.View,{style:m,children:resolveIcon(t,r,l,u)})});
+"use strict";
+
+import { memo, useEffect } from "react";
+import { ActivityIndicator } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { ICON_ANIMATION_DURATION, ICON_SIZE } from "./constants.js";
+import { GreenCheck, InfoIcon, RedX } from "./icons/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const resolveIcon = (type, color, custom, config) => {
+  if (custom) return typeof custom === "function" ? custom({
+    color,
+    size: ICON_SIZE
+  }) : custom;
+  if (config) return config({
+    color,
+    size: ICON_SIZE
+  });
+  switch (type) {
+    case "success":
+      return /*#__PURE__*/_jsx(GreenCheck, {
+        width: 36,
+        height: 36,
+        fill: color
+      });
+    case "error":
+      return /*#__PURE__*/_jsx(RedX, {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        fill: color
+      });
+    case "loading":
+      return /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: ICON_SIZE,
+        color: color
+      });
+    case "info":
+      return /*#__PURE__*/_jsx(InfoIcon, {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        fill: color
+      });
+    default:
+      return /*#__PURE__*/_jsx(GreenCheck, {
+        width: 36,
+        height: 36,
+        fill: color
+      });
+  }
+};
+export const AnimatedIcon = /*#__PURE__*/memo(({
+  type,
+  color,
+  custom,
+  config
+}) => {
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    progress.value = withTiming(1, {
+      duration: ICON_ANIMATION_DURATION,
+      easing: Easing.out(Easing.back(1.5))
+    });
+  }, [progress]);
+  const style = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{
+      scale: 0.7 + progress.value * 0.3
+    }]
+  }));
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: style,
+    children: resolveIcon(type, color, custom, config)
+  });
+});
+//# sourceMappingURL=toast-icons.js.map

package/lib/module/toast-provider.js

@@ -1 +1,104 @@
-"use strict";import{useEffect as t}from"react";import{StyleSheet as o,View as r}from"react-native";import{ToastContainer as e}from"./toast.js";import{toastStore as n}from"./toast-store.js";import{jsx as i}from"react/jsx-runtime";export function BreadLoaf({config:o}){return t(()=>(n.setConfig(o),()=>{n.setConfig(void 0)}),[o]),i(r,{style:s.container,pointerEvents:"box-none",children:i(e,{})})}const s=o.create({container:{...o.absoluteFillObject,zIndex:9999}});
+"use strict";
+
+import { useEffect } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { FullWindowOverlay } from "react-native-screens";
+import { ToastContainer } from "./toast.js";
+import { toastStore } from "./toast-store.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ToastContent() {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    pointerEvents: "box-none",
+    children: /*#__PURE__*/_jsx(ToastContainer, {})
+  });
+}
+/**
+ * Toast component that enables toast notifications in your app.
+ * Add `<BreadLoaf />` to your root layout to start showing toasts.
+ *
+ * @example
+ * ```tsx
+ * import { BreadLoaf } from 'react-native-bread';
+ *
+ * // Basic usage - add to your root layout
+ * export default function RootLayout() {
+ *   return (
+ *     <>
+ *       <Stack />
+ *       <BreadLoaf />
+ *     </>
+ *   );
+ * }
+ *
+ * // With configuration
+ * <BreadLoaf
+ *   config={{
+ *     position: 'bottom',
+ *     stacking: false,
+ *     defaultDuration: 5000,
+ *     colors: {
+ *       success: { accent: '#22c55e', background: '#f0fdf4' },
+ *       error: { accent: '#ef4444', background: '#fef2f2' },
+ *     },
+ *     toastStyle: { borderRadius: 12 },
+ *   }}
+ * />
+ * ```
+ */
+export function BreadLoaf({
+  config
+}) {
+  useEffect(() => {
+    toastStore.setConfig(config);
+    return () => {
+      toastStore.setConfig(undefined);
+    };
+  }, [config]);
+
+  // iOS: use FullWindowOverlay to render above native modals
+  if (Platform.OS === "ios") {
+    return /*#__PURE__*/_jsx(FullWindowOverlay, {
+      children: /*#__PURE__*/_jsx(ToastContent, {})
+    });
+  }
+  return /*#__PURE__*/_jsx(ToastContent, {});
+}
+
+/**
+ * Lightweight toast renderer for use inside modal screens.
+ *
+ * On Android, native modals render above the root React view, so toasts from
+ * the main `<BreadLoaf />` won't be visible. Add `<ToastPortal />` inside your
+ * modal layouts to show toasts above modal content.
+ *
+ * This component only renders toasts - it does not accept configuration.
+ * All styling/behavior is inherited from your root `<BreadLoaf />` config.
+ *
+ * @example
+ * ```tsx
+ * // app/(modal)/_layout.tsx
+ * import { Stack } from 'expo-router';
+ * import { ToastPortal } from 'react-native-bread';
+ * import { Platform } from 'react-native';
+ *
+ * export default function ModalLayout() {
+ *   return (
+ *     <>
+ *       <Stack screenOptions={{ headerShown: false }} />
+ *       {Platform.OS === 'android' && <ToastPortal />}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function ToastPortal() {
+  return /*#__PURE__*/_jsx(ToastContent, {});
+}
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 9999
+  }
+});
+//# sourceMappingURL=toast-provider.js.map

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