@laravel-inertia-toast/react 0.2.1 → 0.3.0

package/README.md

@@ -80,13 +80,27 @@ function MyComponent() {
   const { success, error, info, warning } = useToast()
 
   return (
-    <button onClick={() => success('Copied to clipboard!')}>
-      Copy
-    </button>
+    <>
+      <button onClick={() => success('Copied to clipboard!')}>
+        Copy
+      </button>
+      <button onClick={() => error('Item has been removed.', { title: 'Deleted' })}>
+        Delete
+      </button>
+    </>
   )
 }
 ```
 
+### With Title and Duration
+
+Pass an options object as the second argument to include a title and/or custom duration:
+
+```jsx
+success('Profile has been updated.', { title: 'Success' })
+warning('Session expiring soon.', { title: 'Warning', duration: 10000 })
+```
+
 ## Server-Side Usage
 
 Pair with the PHP package for server-side toasts:
@@ -99,7 +113,7 @@ composer require veekthoven/laravel-inertia-toast
 use InertiaToast\Facades\Toast;
 
 Toast::success('Profile updated!');
-Toast::error('Something went wrong.');
+Toast::error('Something went wrong.', title: 'Error');
 Toast::info('Check your email for a confirmation link.');
 Toast::warning('Your subscription is about to expire.');
 

package/dist/context.d.ts

@@ -1,12 +1,16 @@
 import React from 'react';
 import type { ToastConfig, ToastItem } from './types';
+export interface ToastOptions {
+    title?: string;
+    duration?: number;
+}
 export interface ToastContextValue {
     items: ToastItem[];
     config: ToastConfig;
-    success: (message: string, duration?: number) => void;
-    error: (message: string, duration?: number) => void;
-    info: (message: string, duration?: number) => void;
-    warning: (message: string, duration?: number) => void;
+    success: (message: string, options?: ToastOptions) => void;
+    error: (message: string, options?: ToastOptions) => void;
+    info: (message: string, options?: ToastOptions) => void;
+    warning: (message: string, options?: ToastOptions) => void;
     remove: (id: string) => void;
     clear: () => void;
 }

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),w=require("@inertiajs/react");let b=0;function y(){return`toast-${++b}-${Date.now()}`}const C={duration:5e3,position:"top-right",maxVisible:5,propKey:"toasts"};function j(e,i){switch(i.type){case"ADD":{const c=[{...i.payload,id:y()},...e.items].slice(0,e.config.maxVisible);return{...e,items:c}}case"REMOVE":return{...e,items:e.items.filter(l=>l.id!==i.payload)};case"CLEAR":return{...e,items:[]};default:return e}}const p=r.createContext(null);function R({children:e,config:i}){const l={...C,...i},[c,n]=r.useReducer(j,{items:[],config:l}),d=r.useRef(l);d.current=l,r.useEffect(()=>w.router.on("flash",o=>{const u=o.detail.flash[d.current.propKey];u&&Array.isArray(u)&&u.forEach(m=>{n({type:"ADD",payload:m})})}),[]);const a=r.useCallback((s,o,u)=>{n({type:"ADD",payload:{message:s,level:o,duration:u??null}})},[]),f={items:c.items,config:c.config,success:r.useCallback((s,o)=>a(s,"success",o),[a]),error:r.useCallback((s,o)=>a(s,"error",o),[a]),info:r.useCallback((s,o)=>a(s,"info",o),[a]),warning:r.useCallback((s,o)=>a(s,"warning",o),[a]),remove:r.useCallback(s=>n({type:"REMOVE",payload:s}),[]),clear:r.useCallback(()=>n({type:"CLEAR"}),[])};return t.jsx(p.Provider,{value:f,children:e})}function h(){const e=r.useContext(p);if(!e)throw new Error("useToast must be used within a <ToastProvider>");return e}const g={success:"bg-green-100 text-green-500",error:"bg-rose-100 text-rose-500",warning:"bg-yellow-100 text-yellow-500",info:"bg-blue-100 text-blue-500"};function T(){return t.jsx("svg",{className:"size-5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20",children:t.jsx("path",{d:"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"})})}function L(){return t.jsx("svg",{className:"size-5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20",children:t.jsx("path",{d:"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"})})}function E(){return t.jsx("svg",{className:"size-5",viewBox:"0 0 20 20",fill:"currentColor",children:t.jsx("path",{fillRule:"evenodd",d:"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z",clipRule:"evenodd"})})}function z(){return t.jsx("svg",{className:"size-5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{fillRule:"evenodd",d:"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",clipRule:"evenodd"})})}function A({level:e}){switch(e){case"success":return t.jsx(T,{});case"error":return t.jsx(L,{});case"warning":return t.jsx(E,{});default:return t.jsx(z,{})}}function M(e){return e.includes("right")?"translate-x-full":e.includes("left")?"-translate-x-full":e.startsWith("top")?"-translate-y-full":"translate-y-full"}function v({toast:e,config:i,position:l,onRemove:c}){const n=r.useRef(null),[d,a]=r.useState(!1),f=e.duration??i.duration,s=r.useCallback(()=>{n.current&&(clearTimeout(n.current),n.current=null),a(!1)},[]);r.useEffect(()=>{const m=requestAnimationFrame(()=>a(!0));return()=>cancelAnimationFrame(m)},[]),r.useEffect(()=>(f>0&&(n.current=setTimeout(s,f)),()=>{n.current&&clearTimeout(n.current)}),[f,s]);const o=M(l),u=d?"opacity-100 translate-x-0 translate-y-0 duration-300 ease-out":`opacity-0 ${o} duration-200 ease-in`;return t.jsxs("div",{className:`flex items-center rounded-lg bg-white p-4 text-gray-500 shadow min-w-96 transition ${u}`,role:"alert",onTransitionEnd:()=>{d||c(e.id)},children:[t.jsx("div",{className:`inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${g[e.level]??g.info}`,children:t.jsx(A,{level:e.level})}),t.jsx("div",{className:"ml-3 text-sm font-normal",children:e.message}),t.jsxs("button",{type:"button",className:"ml-auto inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300",onClick:s,"aria-label":"Close",children:[t.jsx("span",{className:"sr-only",children:"Close"}),t.jsx("svg",{"aria-hidden":"true",className:"h-5 w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})]})}const x={"top-right":"top-4 right-4 items-end","top-left":"top-4 left-4 items-start","top-center":"top-4 left-1/2 -translate-x-1/2 items-center","bottom-right":"bottom-4 right-4 items-end","bottom-left":"bottom-4 left-4 items-start","bottom-center":"bottom-4 left-1/2 -translate-x-1/2 items-center"};function N(){const{items:e,config:i,remove:l}=h(),c=x[i.position]??x["top-right"];return t.jsx("div",{className:`fixed z-50 flex w-full max-w-sm flex-col gap-3 ${c}`,"aria-live":"polite",children:e.map(n=>t.jsx(v,{toast:n,config:i,position:i.position,onRemove:l},n.id))})}exports.ToastItem=v;exports.ToastProvider=R;exports.Toasts=N;exports.useToast=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),w=require("@inertiajs/react");let b=0;function y(){return`toast-${++b}-${Date.now()}`}const j={duration:5e3,position:"top-right",maxVisible:5,propKey:"toasts"};function C(e,a){switch(a.type){case"ADD":{const u=[{...a.payload,id:y()},...e.items].slice(0,e.config.maxVisible);return{...e,items:u}}case"REMOVE":return{...e,items:e.items.filter(c=>c.id!==a.payload)};case"CLEAR":return{...e,items:[]};default:return e}}const h=r.createContext(null);function R({children:e,config:a}){const c={...j,...a},[u,n]=r.useReducer(C,{items:[],config:c}),d=r.useRef(c);d.current=c,r.useEffect(()=>w.router.on("flash",l=>{const i=l.detail.flash[d.current.propKey];i&&Array.isArray(i)&&i.forEach(m=>{n({type:"ADD",payload:m})})}),[]);const o=r.useCallback((s,l,i)=>{n({type:"ADD",payload:{message:s,level:l,title:(i==null?void 0:i.title)??null,duration:(i==null?void 0:i.duration)??null}})},[]),f={items:u.items,config:u.config,success:r.useCallback((s,l)=>o(s,"success",l),[o]),error:r.useCallback((s,l)=>o(s,"error",l),[o]),info:r.useCallback((s,l)=>o(s,"info",l),[o]),warning:r.useCallback((s,l)=>o(s,"warning",l),[o]),remove:r.useCallback(s=>n({type:"REMOVE",payload:s}),[]),clear:r.useCallback(()=>n({type:"CLEAR"}),[])};return t.jsx(h.Provider,{value:f,children:e})}function v(){const e=r.useContext(h);if(!e)throw new Error("useToast must be used within a <ToastProvider>");return e}const g={success:"bg-green-100 text-green-500",error:"bg-rose-100 text-rose-500",warning:"bg-yellow-100 text-yellow-500",info:"bg-blue-100 text-blue-500"};function T(){return t.jsx("svg",{className:"size-5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20",children:t.jsx("path",{d:"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"})})}function L(){return t.jsx("svg",{className:"size-5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 20 20",children:t.jsx("path",{d:"M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"})})}function E(){return t.jsx("svg",{className:"size-5",viewBox:"0 0 20 20",fill:"currentColor",children:t.jsx("path",{fillRule:"evenodd",d:"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z",clipRule:"evenodd"})})}function z(){return t.jsx("svg",{className:"size-5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{fillRule:"evenodd",d:"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",clipRule:"evenodd"})})}function A({level:e}){switch(e){case"success":return t.jsx(T,{});case"error":return t.jsx(L,{});case"warning":return t.jsx(E,{});default:return t.jsx(z,{})}}function N(e){return e.includes("right")?"translate-x-full":e.includes("left")?"-translate-x-full":e.startsWith("top")?"-translate-y-full":"translate-y-full"}function p({toast:e,config:a,position:c,onRemove:u}){const n=r.useRef(null),[d,o]=r.useState(!1),f=e.duration??a.duration,s=r.useCallback(()=>{n.current&&(clearTimeout(n.current),n.current=null),o(!1)},[]);r.useEffect(()=>{const m=requestAnimationFrame(()=>o(!0));return()=>cancelAnimationFrame(m)},[]),r.useEffect(()=>(f>0&&(n.current=setTimeout(s,f)),()=>{n.current&&clearTimeout(n.current)}),[f,s]);const l=N(c),i=d?"opacity-100 translate-x-0 translate-y-0 duration-300 ease-out":`opacity-0 ${l} duration-200 ease-in`;return t.jsxs("div",{className:`flex items-center rounded-lg bg-white p-4 text-gray-500 shadow min-w-96 transition ${i}`,role:"alert",onTransitionEnd:()=>{d||u(e.id)},children:[t.jsx("div",{className:`inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${g[e.level]??g.info}`,children:t.jsx(A,{level:e.level})}),t.jsxs("div",{className:"ml-3 text-sm font-normal",children:[e.title&&t.jsx("div",{className:"font-semibold text-gray-900 mb-1",children:e.title}),e.message]}),t.jsxs("button",{type:"button",className:"ml-auto inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 shrink-0",onClick:s,"aria-label":"Close",children:[t.jsx("span",{className:"sr-only",children:"Close"}),t.jsx("svg",{"aria-hidden":"true",className:"h-5 w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})]})]})}const x={"top-right":"top-4 right-4 items-end","top-left":"top-4 left-4 items-start","top-center":"top-4 left-1/2 -translate-x-1/2 items-center","bottom-right":"bottom-4 right-4 items-end","bottom-left":"bottom-4 left-4 items-start","bottom-center":"bottom-4 left-1/2 -translate-x-1/2 items-center"};function k(){const{items:e,config:a,remove:c}=v(),u=x[a.position]??x["top-right"];return t.jsx("div",{className:`fixed z-50 flex w-full max-w-sm flex-col gap-3 ${u}`,"aria-live":"polite",children:e.map(n=>t.jsx(p,{toast:n,config:a,position:a.position,onRemove:c},n.id))})}exports.ToastItem=p;exports.ToastProvider=R;exports.Toasts=k;exports.useToast=v;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { ToastProvider } from './context';
-export type { ToastProviderProps, ToastContextValue } from './context';
+export type { ToastProviderProps, ToastContextValue, ToastOptions } from './context';
 export { useToast } from './hooks/useToast';
 export { Toasts } from './components/Toasts';
 export { ToastItem } from './components/ToastItem';

package/dist/index.js

@@ -1,5 +1,5 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { createContext as y, useReducer as b, useRef as w, useEffect as g, useCallback as c, useContext as C, useState as R } from "react";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { createContext as y, useReducer as b, useRef as w, useEffect as h, useCallback as u, useContext as C, useState as R } from "react";
 import { router as L } from "@inertiajs/react";
 let T = 0;
 function z() {
@@ -11,19 +11,19 @@ const A = {
   maxVisible: 5,
   propKey: "toasts"
 };
-function E(e, i) {
-  switch (i.type) {
+function E(e, l) {
+  switch (l.type) {
     case "ADD": {
-      const a = [{
-        ...i.payload,
+      const c = [{
+        ...l.payload,
         id: z()
       }, ...e.items].slice(0, e.config.maxVisible);
-      return { ...e, items: a };
+      return { ...e, items: c };
     }
     case "REMOVE":
       return {
         ...e,
-        items: e.items.filter((l) => l.id !== i.payload)
+        items: e.items.filter((a) => a.id !== l.payload)
       };
     case "CLEAR":
       return { ...e, items: [] };
@@ -32,31 +32,31 @@ function E(e, i) {
   }
 }
 const x = y(null);
-function S({ children: e, config: i }) {
-  const l = { ...A, ...i }, [a, n] = b(E, {
+function S({ children: e, config: l }) {
+  const a = { ...A, ...l }, [c, n] = b(E, {
     items: [],
-    config: l
-  }), d = w(l);
-  d.current = l, g(() => L.on("flash", (o) => {
-    const u = o.detail.flash[d.current.propKey];
-    u && Array.isArray(u) && u.forEach((m) => {
+    config: a
+  }), d = w(a);
+  d.current = a, h(() => L.on("flash", (i) => {
+    const s = i.detail.flash[d.current.propKey];
+    s && Array.isArray(s) && s.forEach((m) => {
       n({ type: "ADD", payload: m });
     });
   }), []);
-  const s = c((r, o, u) => {
+  const o = u((r, i, s) => {
     n({
       type: "ADD",
-      payload: { message: r, level: o, duration: u ?? null }
+      payload: { message: r, level: i, title: (s == null ? void 0 : s.title) ?? null, duration: (s == null ? void 0 : s.duration) ?? null }
     });
   }, []), f = {
-    items: a.items,
-    config: a.config,
-    success: c((r, o) => s(r, "success", o), [s]),
-    error: c((r, o) => s(r, "error", o), [s]),
-    info: c((r, o) => s(r, "info", o), [s]),
-    warning: c((r, o) => s(r, "warning", o), [s]),
-    remove: c((r) => n({ type: "REMOVE", payload: r }), []),
-    clear: c(() => n({ type: "CLEAR" }), [])
+    items: c.items,
+    config: c.config,
+    success: u((r, i) => o(r, "success", i), [o]),
+    error: u((r, i) => o(r, "error", i), [o]),
+    info: u((r, i) => o(r, "info", i), [o]),
+    warning: u((r, i) => o(r, "warning", i), [o]),
+    remove: u((r) => n({ type: "REMOVE", payload: r }), []),
+    clear: u(() => n({ type: "CLEAR" }), [])
   };
   return /* @__PURE__ */ t(x.Provider, { value: f, children: e });
 }
@@ -66,7 +66,7 @@ function N() {
     throw new Error("useToast must be used within a <ToastProvider>");
   return e;
 }
-const h = {
+const p = {
   success: "bg-green-100 text-green-500",
   error: "bg-rose-100 text-rose-500",
   warning: "bg-yellow-100 text-yellow-500",
@@ -136,39 +136,42 @@ function B({ level: e }) {
 function V(e) {
   return e.includes("right") ? "translate-x-full" : e.includes("left") ? "-translate-x-full" : e.startsWith("top") ? "-translate-y-full" : "translate-y-full";
 }
-function j({ toast: e, config: i, position: l, onRemove: a }) {
-  const n = w(null), [d, s] = R(!1), f = e.duration ?? i.duration, r = c(() => {
-    n.current && (clearTimeout(n.current), n.current = null), s(!1);
+function j({ toast: e, config: l, position: a, onRemove: c }) {
+  const n = w(null), [d, o] = R(!1), f = e.duration ?? l.duration, r = u(() => {
+    n.current && (clearTimeout(n.current), n.current = null), o(!1);
   }, []);
-  g(() => {
-    const m = requestAnimationFrame(() => s(!0));
+  h(() => {
+    const m = requestAnimationFrame(() => o(!0));
     return () => cancelAnimationFrame(m);
-  }, []), g(() => (f > 0 && (n.current = setTimeout(r, f)), () => {
+  }, []), h(() => (f > 0 && (n.current = setTimeout(r, f)), () => {
     n.current && clearTimeout(n.current);
   }), [f, r]);
-  const o = V(l), u = d ? "opacity-100 translate-x-0 translate-y-0 duration-300 ease-out" : `opacity-0 ${o} duration-200 ease-in`;
-  return /* @__PURE__ */ p(
+  const i = V(a), s = d ? "opacity-100 translate-x-0 translate-y-0 duration-300 ease-out" : `opacity-0 ${i} duration-200 ease-in`;
+  return /* @__PURE__ */ g(
     "div",
     {
-      className: `flex items-center rounded-lg bg-white p-4 text-gray-500 shadow min-w-96 transition ${u}`,
+      className: `flex items-center rounded-lg bg-white p-4 text-gray-500 shadow min-w-96 transition ${s}`,
       role: "alert",
       onTransitionEnd: () => {
-        d || a(e.id);
+        d || c(e.id);
       },
       children: [
         /* @__PURE__ */ t(
           "div",
           {
-            className: `inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${h[e.level] ?? h.info}`,
+            className: `inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${p[e.level] ?? p.info}`,
             children: /* @__PURE__ */ t(B, { level: e.level })
           }
         ),
-        /* @__PURE__ */ t("div", { className: "ml-3 text-sm font-normal", children: e.message }),
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ g("div", { className: "ml-3 text-sm font-normal", children: [
+          e.title && /* @__PURE__ */ t("div", { className: "font-semibold text-gray-900 mb-1", children: e.title }),
+          e.message
+        ] }),
+        /* @__PURE__ */ g(
           "button",
           {
             type: "button",
-            className: "ml-auto inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300",
+            className: "ml-auto inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 shrink-0",
             onClick: r,
             "aria-label": "Close",
             children: [
@@ -207,13 +210,13 @@ const v = {
   "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center"
 };
 function F() {
-  const { items: e, config: i, remove: l } = N(), a = v[i.position] ?? v["top-right"];
+  const { items: e, config: l, remove: a } = N(), c = v[l.position] ?? v["top-right"];
   return /* @__PURE__ */ t(
     "div",
     {
-      className: `fixed z-50 flex w-full max-w-sm flex-col gap-3 ${a}`,
+      className: `fixed z-50 flex w-full max-w-sm flex-col gap-3 ${c}`,
       "aria-live": "polite",
-      children: e.map((n) => /* @__PURE__ */ t(j, { toast: n, config: i, position: i.position, onRemove: l }, n.id))
+      children: e.map((n) => /* @__PURE__ */ t(j, { toast: n, config: l, position: l.position, onRemove: a }, n.id))
     }
   );
 }

package/dist/types.d.ts

@@ -2,6 +2,7 @@ export type ToastLevel = 'success' | 'error' | 'info' | 'warning';
 export interface ToastMessage {
     message: string;
     level: ToastLevel;
+    title: string | null;
     duration: number | null;
 }
 export interface ToastItem extends ToastMessage {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laravel-inertia-toast/react",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React toast components for Laravel Inertia Toast",
   "license": "MIT",
   "type": "module",