@laravel-inertia-toast/react 0.1.0 → 0.2.0

package/dist/components/ToastItem.d.ts

@@ -2,7 +2,8 @@ import type { ToastItem as ToastItemType, ToastConfig } from '../types';
 interface ToastItemProps {
     toast: ToastItemType;
     config: ToastConfig;
+    position: string;
     onRemove: (id: string) => void;
 }
-export declare function ToastItem({ toast, config, onRemove }: ToastItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastItem({ toast, config, position, onRemove }: ToastItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),x=require("@inertiajs/react");let j=0;function C(){return`toast-${++j}-${Date.now()}`}const y={duration:5e3,position:"top-right",maxVisible:5,propKey:"toasts"};function k(t,i){switch(i.type){case"ADD":{const a=[{...i.payload,id:C()},...t.items].slice(0,t.config.maxVisible);return{...t,items:a}}case"REMOVE":return{...t,items:t.items.filter(n=>n.id!==i.payload)};case"CLEAR":return{...t,items:[]};default:return t}}const v=r.createContext(null);function R({children:t,config:i}){const n={...y,...i},[a,l]=r.useReducer(k,{items:[],config:n}),f=x.usePage(),m=r.useRef(n);m.current=n,r.useEffect(()=>x.router.on("finish",()=>{const s=f.props[m.current.propKey];s&&Array.isArray(s)&&s.forEach(d=>{l({type:"ADD",payload:d})})}),[f.props]);const c=r.useCallback((o,s,d)=>{l({type:"ADD",payload:{message:o,level:s,duration:d??null}})},[]),w={items:a.items,config:a.config,success:r.useCallback((o,s)=>c(o,"success",s),[c]),error:r.useCallback((o,s)=>c(o,"error",s),[c]),info:r.useCallback((o,s)=>c(o,"info",s),[c]),warning:r.useCallback((o,s)=>c(o,"warning",s),[c]),remove:r.useCallback(o=>l({type:"REMOVE",payload:o}),[]),clear:r.useCallback(()=>l({type:"CLEAR"}),[])};return e.jsx(v.Provider,{value:w,children:t})}function h(){const t=r.useContext(v);if(!t)throw new Error("useToast must be used within a <ToastProvider>");return t}const g={success:"bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300",error:"bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300",warning:"bg-yellow-50 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",info:"bg-blue-50 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"},u={success:"text-green-500 dark:text-green-400",error:"text-red-500 dark:text-red-400",warning:"text-yellow-500 dark:text-yellow-400",info:"text-blue-500 dark:text-blue-400"};function N(){return e.jsx("svg",{className:"h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",clipRule:"evenodd"})})}function L(){return e.jsx("svg",{className:"h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",clipRule:"evenodd"})})}function T(){return e.jsx("svg",{className:"h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor",children:e.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 e.jsx("svg",{className:"h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",clipRule:"evenodd"})})}function M({level:t}){switch(t){case"success":return e.jsx(N,{});case"error":return e.jsx(L,{});case"warning":return e.jsx(T,{});default:return e.jsx(z,{})}}function b({toast:t,config:i,onRemove:n}){const a=r.useRef(null),l=t.duration??i.duration;return r.useEffect(()=>(l>0&&(a.current=setTimeout(()=>{n(t.id)},l)),()=>{a.current&&clearTimeout(a.current)}),[l,t.id,n]),e.jsx("div",{className:`pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-black/5 ${g[t.level]??g.info}`,role:"alert",children:e.jsx("div",{className:"p-4",children:e.jsxs("div",{className:"flex items-start",children:[e.jsx("div",{className:`shrink-0 ${u[t.level]??u.info}`,children:e.jsx(M,{level:t.level})}),e.jsx("div",{className:"ml-3 w-0 flex-1",children:e.jsx("p",{className:"text-sm font-medium",children:t.message})}),e.jsx("div",{className:"ml-4 flex shrink-0",children:e.jsxs("button",{type:"button",className:`inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 ${u[t.level]??u.info}`,onClick:()=>n(t.id),children:[e.jsx("span",{className:"sr-only",children:"Close"}),e.jsx("svg",{className:"h-5 w-5",viewBox:"0 0 20 20",fill:"currentColor",children:e.jsx("path",{d:"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"})})]})})]})})})}const p={"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 E(){const{items:t,config:i,remove:n}=h(),a=p[i.position]??p["top-right"];return e.jsx("div",{className:`pointer-events-none fixed z-50 flex w-full max-w-sm flex-col gap-3 ${a}`,"aria-live":"polite",children:t.map(l=>e.jsx(b,{toast:l,config:i,onRemove:n},l.id))})}exports.ToastItem=b;exports.ToastProvider=R;exports.Toasts=E;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 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;

package/dist/index.js

@@ -1,29 +1,29 @@
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { createContext as y, useReducer as C, useRef as h, useEffect as x, useCallback as c, useContext as k } from "react";
-import { usePage as R, router as N } from "@inertiajs/react";
-let L = 0;
+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 { router as L } from "@inertiajs/react";
+let T = 0;
 function z() {
-  return `toast-${++L}-${Date.now()}`;
+  return `toast-${++T}-${Date.now()}`;
 }
-const M = {
+const A = {
   duration: 5e3,
   position: "top-right",
   maxVisible: 5,
   propKey: "toasts"
 };
-function A(e, i) {
+function E(e, i) {
   switch (i.type) {
     case "ADD": {
-      const s = [{
+      const a = [{
         ...i.payload,
         id: z()
       }, ...e.items].slice(0, e.config.maxVisible);
-      return { ...e, items: s };
+      return { ...e, items: a };
     }
     case "REMOVE":
       return {
         ...e,
-        items: e.items.filter((n) => n.id !== i.payload)
+        items: e.items.filter((l) => l.id !== i.payload)
       };
     case "CLEAR":
       return { ...e, items: [] };
@@ -31,74 +31,75 @@ function A(e, i) {
       return e;
   }
 }
-const w = y(null);
-function K({ children: e, config: i }) {
-  const n = { ...M, ...i }, [s, l] = C(A, {
+const x = y(null);
+function S({ children: e, config: i }) {
+  const l = { ...A, ...i }, [a, n] = b(E, {
     items: [],
-    config: n
-  }), f = R(), m = h(n);
-  m.current = n, x(() => N.on("finish", () => {
-    const r = f.props[m.current.propKey];
-    r && Array.isArray(r) && r.forEach((u) => {
-      l({ type: "ADD", payload: u });
+    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) => {
+      n({ type: "ADD", payload: m });
     });
-  }), [f.props]);
-  const a = c((o, r, u) => {
-    l({
+  }), []);
+  const s = c((r, o, u) => {
+    n({
       type: "ADD",
-      payload: { message: o, level: r, duration: u ?? null }
+      payload: { message: r, level: o, duration: u ?? null }
     });
-  }, []), b = {
-    items: s.items,
-    config: s.config,
-    success: c((o, r) => a(o, "success", r), [a]),
-    error: c((o, r) => a(o, "error", r), [a]),
-    info: c((o, r) => a(o, "info", r), [a]),
-    warning: c((o, r) => a(o, "warning", r), [a]),
-    remove: c((o) => l({ type: "REMOVE", payload: o }), []),
-    clear: c(() => l({ type: "CLEAR" }), [])
+  }, []), 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" }), [])
   };
-  return /* @__PURE__ */ t(w.Provider, { value: b, children: e });
+  return /* @__PURE__ */ t(x.Provider, { value: f, children: e });
 }
-function E() {
-  const e = k(w);
+function N() {
+  const e = C(x);
   if (!e)
     throw new Error("useToast must be used within a <ToastProvider>");
   return e;
 }
-const g = {
-  success: "bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300",
-  error: "bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300",
-  warning: "bg-yellow-50 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
-  info: "bg-blue-50 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
-}, d = {
-  success: "text-green-500 dark:text-green-400",
-  error: "text-red-500 dark:text-red-400",
-  warning: "text-yellow-500 dark:text-yellow-400",
-  info: "text-blue-500 dark:text-blue-400"
+const h = {
+  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 /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
-    "path",
+function M() {
+  return /* @__PURE__ */ t(
+    "svg",
     {
-      fillRule: "evenodd",
-      d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
-      clipRule: "evenodd"
+      className: "size-5",
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      children: /* @__PURE__ */ t("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 I() {
-  return /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
-    "path",
+  return /* @__PURE__ */ t(
+    "svg",
     {
-      fillRule: "evenodd",
-      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z",
-      clipRule: "evenodd"
+      className: "size-5",
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      children: /* @__PURE__ */ t("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 D() {
-  return /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t("svg", { className: "size-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
     "path",
     {
       fillRule: "evenodd",
@@ -108,19 +109,22 @@ function D() {
   ) });
 }
 function $() {
-  return /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
-    "path",
+  return /* @__PURE__ */ t(
+    "svg",
     {
-      fillRule: "evenodd",
-      d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
-      clipRule: "evenodd"
+      className: "size-5",
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ t("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 B({ level: e }) {
   switch (e) {
     case "success":
-      return /* @__PURE__ */ t(T, {});
+      return /* @__PURE__ */ t(M, {});
     case "error":
       return /* @__PURE__ */ t(I, {});
     case "warning":
@@ -129,33 +133,68 @@ function B({ level: e }) {
       return /* @__PURE__ */ t($, {});
   }
 }
-function P({ toast: e, config: i, onRemove: n }) {
-  const s = h(null), l = e.duration ?? i.duration;
-  return x(() => (l > 0 && (s.current = setTimeout(() => {
-    n(e.id);
-  }, l)), () => {
-    s.current && clearTimeout(s.current);
-  }), [l, e.id, n]), /* @__PURE__ */ t(
+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);
+  }, []);
+  g(() => {
+    const m = requestAnimationFrame(() => s(!0));
+    return () => cancelAnimationFrame(m);
+  }, []), g(() => (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(
     "div",
     {
-      className: `pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-black/5 ${g[e.level] ?? g.info}`,
+      className: `flex items-center rounded-lg bg-white p-4 text-gray-500 shadow min-w-96 transition ${u}`,
       role: "alert",
-      children: /* @__PURE__ */ t("div", { className: "p-4", children: /* @__PURE__ */ p("div", { className: "flex items-start", children: [
-        /* @__PURE__ */ t("div", { className: `shrink-0 ${d[e.level] ?? d.info}`, children: /* @__PURE__ */ t(B, { level: e.level }) }),
-        /* @__PURE__ */ t("div", { className: "ml-3 w-0 flex-1", children: /* @__PURE__ */ t("p", { className: "text-sm font-medium", children: e.message }) }),
-        /* @__PURE__ */ t("div", { className: "ml-4 flex shrink-0", children: /* @__PURE__ */ p(
+      onTransitionEnd: () => {
+        d || a(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}`,
+            children: /* @__PURE__ */ t(B, { level: e.level })
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "ml-3 text-sm font-normal", children: e.message }),
+        /* @__PURE__ */ p(
           "button",
           {
             type: "button",
-            className: `inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 ${d[e.level] ?? d.info}`,
-            onClick: () => n(e.id),
+            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: r,
+            "aria-label": "Close",
             children: [
               /* @__PURE__ */ t("span", { className: "sr-only", children: "Close" }),
-              /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
+              /* @__PURE__ */ t(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: "h-5 w-5",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ t(
+                    "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"
+                    }
+                  )
+                }
+              )
             ]
           }
-        ) })
-      ] }) })
+        )
+      ]
     }
   );
 }
@@ -167,20 +206,20 @@ const v = {
   "bottom-left": "bottom-4 left-4 items-start",
   "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center"
 };
-function O() {
-  const { items: e, config: i, remove: n } = E(), s = v[i.position] ?? v["top-right"];
+function F() {
+  const { items: e, config: i, remove: l } = N(), a = v[i.position] ?? v["top-right"];
   return /* @__PURE__ */ t(
     "div",
     {
-      className: `pointer-events-none fixed z-50 flex w-full max-w-sm flex-col gap-3 ${s}`,
+      className: `fixed z-50 flex w-full max-w-sm flex-col gap-3 ${a}`,
       "aria-live": "polite",
-      children: e.map((l) => /* @__PURE__ */ t(P, { toast: l, config: i, onRemove: n }, l.id))
+      children: e.map((n) => /* @__PURE__ */ t(j, { toast: n, config: i, position: i.position, onRemove: l }, n.id))
     }
   );
 }
 export {
-  P as ToastItem,
-  K as ToastProvider,
-  O as Toasts,
-  E as useToast
+  j as ToastItem,
+  S as ToastProvider,
+  F as Toasts,
+  N as useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laravel-inertia-toast/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React toast components for Laravel Inertia Toast",
   "license": "MIT",
   "type": "module",
@@ -22,7 +22,7 @@
     "dev": "vite build --watch"
   },
   "peerDependencies": {
-    "@inertiajs/react": "^1.0.0 || ^2.0.0",
+    "@inertiajs/react": "^2.3.3",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },