@laravel-inertia-toast/react 0.1.1 → 0.2.1

package/README.md

@@ -0,0 +1,119 @@
+# @laravel-inertia-toast/react
+
+React adapter for [Laravel Inertia Toast](https://github.com/veekthoven/laravel-inertia-toast) — beautiful toast notifications for Laravel + Inertia.js applications.
+
+## Demo
+
+**React:**
+![React](../demo/react.png)
+
+**See it in action:**
+![Vue](../demo/toast-demo.gif)
+
+## Installation
+
+```bash
+npm install @laravel-inertia-toast/react
+```
+
+## Setup
+
+### 1. Add the Provider
+
+Wrap your app with `<ToastProvider>` and add `<Toasts />`:
+
+```jsx
+// in your resources/js/app.tsx
+
+import { createRoot } from 'react-dom/client';
+import { ToastProvider, Toasts } from '@laravel-inertia-toast/react'
+
+setup({ el, App, props }) {
+    const root = createRoot(el);
+
+    root.render(
+        <ToastProvider
+            config={{
+                position: 'top-right'
+                duration: 5000,
+                maxVisible: 5,
+            }}
+        >
+            <App {...props} />
+            <Toasts />
+        </ToastProvider>
+    );
+},
+```
+
+### 2. Tailwind CSS
+
+Since the toast components use Tailwind classes internally, add the package to Tailwind's source detection.
+
+**Tailwind v4** — add this `@source` directive to your CSS file (e.g. `resources/css/app.css`):
+
+```css
+@source "../../node_modules/@laravel-inertia-toast/react/dist/**/*.js";
+```
+
+**Tailwind v3** — add to `tailwind.config.js`:
+
+```js
+module.exports = {
+    content: [
+        // ...
+        './node_modules/@laravel-inertia-toast/react/dist/**/*.js',
+    ],
+}
+```
+
+> The relative paths above assume standard Laravel project structure. Adjust if your setup differs.
+
+## Client-Side Usage
+
+Use the `useToast()` hook to trigger toasts from your components:
+
+```jsx
+import { useToast } from '@laravel-inertia-toast/react'
+
+function MyComponent() {
+  const { success, error, info, warning } = useToast()
+
+  return (
+    <button onClick={() => success('Copied to clipboard!')}>
+      Copy
+    </button>
+  )
+}
+```
+
+## Server-Side Usage
+
+Pair with the PHP package for server-side toasts:
+
+```bash
+composer require veekthoven/laravel-inertia-toast
+```
+
+```php
+use InertiaToast\Facades\Toast;
+
+Toast::success('Profile updated!');
+Toast::error('Something went wrong.');
+Toast::info('Check your email for a confirmation link.');
+Toast::warning('Your subscription is about to expire.');
+
+return redirect()->route('dashboard');
+```
+
+For full documentation, configuration options, and the PHP helper API, see the [main repository](https://github.com/veekthoven/laravel-inertia-toast).
+
+## Requirements
+
+- React 18+
+- Inertia.js v2.3.3+
+- Tailwind CSS v3 or v4
+
+## License
+
+MIT

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"),w=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(s=>s.id!==i.payload)};case"CLEAR":return{...t,items:[]};default:return t}}const g=r.createContext(null);function R({children:t,config:i}){const s={...y,...i},[a,l]=r.useReducer(k,{items:[],config:s}),f=r.useRef(s);f.current=s,r.useEffect(()=>w.router.on("navigate",o=>{const u=o.detail.page.props[f.current.propKey];u&&Array.isArray(u)&&u.forEach(b=>{l({type:"ADD",payload:b})})}),[]);const c=r.useCallback((n,o,u)=>{l({type:"ADD",payload:{message:n,level:o,duration:u??null}})},[]),h={items:a.items,config:a.config,success:r.useCallback((n,o)=>c(n,"success",o),[c]),error:r.useCallback((n,o)=>c(n,"error",o),[c]),info:r.useCallback((n,o)=>c(n,"info",o),[c]),warning:r.useCallback((n,o)=>c(n,"warning",o),[c]),remove:r.useCallback(n=>l({type:"REMOVE",payload:n}),[]),clear:r.useCallback(()=>l({type:"CLEAR"}),[])};return e.jsx(g.Provider,{value:h,children:t})}function p(){const t=r.useContext(g);if(!t)throw new Error("useToast must be used within a <ToastProvider>");return t}const m={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"};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 v({toast:t,config:i,onRemove:s}){const a=r.useRef(null),l=t.duration??i.duration;return r.useEffect(()=>(l>0&&(a.current=setTimeout(()=>{s(t.id)},l)),()=>{a.current&&clearTimeout(a.current)}),[l,t.id,s]),e.jsx("div",{className:`pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-black/5 ${m[t.level]??m.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 ${d[t.level]??d.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 ${d[t.level]??d.info}`,onClick:()=>s(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 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 E(){const{items:t,config:i,remove:s}=p(),a=x[i.position]??x["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(v,{toast:l,config:i,onRemove:s},l.id))})}exports.ToastItem=v;exports.ToastProvider=R;exports.Toasts=E;exports.useToast=p;
+"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 m } from "react/jsx-runtime";
-import { createContext as y, useReducer as C, useRef as v, useEffect as h, useCallback as c, useContext as k } from "react";
-import { router as R } from "@inertiajs/react";
-let N = 0;
-function L() {
-  return `toast-${++N}-${Date.now()}`;
+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 { router as L } from "@inertiajs/react";
+let T = 0;
+function z() {
+  return `toast-${++T}-${Date.now()}`;
 }
-const z = {
+const A = {
   duration: 5e3,
   position: "top-right",
   maxVisible: 5,
   propKey: "toasts"
 };
-function M(e, i) {
+function E(e, i) {
   switch (i.type) {
     case "ADD": {
-      const s = [{
+      const a = [{
         ...i.payload,
-        id: L()
+        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((r) => r.id !== i.payload)
+        items: e.items.filter((l) => l.id !== i.payload)
       };
     case "CLEAR":
       return { ...e, items: [] };
@@ -32,73 +32,74 @@ function M(e, i) {
   }
 }
 const x = y(null);
-function j({ children: e, config: i }) {
-  const r = { ...z, ...i }, [s, o] = C(M, {
+function S({ children: e, config: i }) {
+  const l = { ...A, ...i }, [a, n] = b(E, {
     items: [],
-    config: r
-  }), f = v(r);
-  f.current = r, h(() => R.on("navigate", (l) => {
-    const d = l.detail.page.props[f.current.propKey];
-    d && Array.isArray(d) && d.forEach((b) => {
-      o({ type: "ADD", payload: b });
+    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 });
     });
   }), []);
-  const a = c((n, l, d) => {
-    o({
+  const s = c((r, o, u) => {
+    n({
       type: "ADD",
-      payload: { message: n, level: l, duration: d ?? null }
+      payload: { message: r, level: o, duration: u ?? null }
     });
-  }, []), w = {
-    items: s.items,
-    config: s.config,
-    success: c((n, l) => a(n, "success", l), [a]),
-    error: c((n, l) => a(n, "error", l), [a]),
-    info: c((n, l) => a(n, "info", l), [a]),
-    warning: c((n, l) => a(n, "warning", l), [a]),
-    remove: c((n) => o({ type: "REMOVE", payload: n }), []),
-    clear: c(() => o({ 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(x.Provider, { value: w, children: e });
+  return /* @__PURE__ */ t(x.Provider, { value: f, children: e });
 }
-function A() {
-  const e = k(x);
+function N() {
+  const e = C(x);
   if (!e)
     throw new Error("useToast must be used within a <ToastProvider>");
   return e;
 }
-const p = {
-  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"
+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 E() {
-  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 T() {
-  return /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
-    "path",
+function I() {
+  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 I() {
-  return /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
+function D() {
+  return /* @__PURE__ */ t("svg", { className: "size-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
     "path",
     {
       fillRule: "evenodd",
@@ -107,59 +108,97 @@ function I() {
     }
   ) });
 }
-function D() {
-  return /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
-    "path",
+function $() {
+  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 $({ level: e }) {
+function B({ level: e }) {
   switch (e) {
     case "success":
-      return /* @__PURE__ */ t(E, {});
+      return /* @__PURE__ */ t(M, {});
     case "error":
-      return /* @__PURE__ */ t(T, {});
-    case "warning":
       return /* @__PURE__ */ t(I, {});
-    default:
+    case "warning":
       return /* @__PURE__ */ t(D, {});
+    default:
+      return /* @__PURE__ */ t($, {});
   }
 }
-function B({ toast: e, config: i, onRemove: r }) {
-  const s = v(null), o = e.duration ?? i.duration;
-  return h(() => (o > 0 && (s.current = setTimeout(() => {
-    r(e.id);
-  }, o)), () => {
-    s.current && clearTimeout(s.current);
-  }), [o, e.id, r]), /* @__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 ${p[e.level] ?? p.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__ */ m("div", { className: "flex items-start", children: [
-        /* @__PURE__ */ t("div", { className: `shrink-0 ${u[e.level] ?? u.info}`, children: /* @__PURE__ */ t($, { 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__ */ m(
+      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 ${u[e.level] ?? u.info}`,
-            onClick: () => r(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"
+                    }
+                  )
+                }
+              )
             ]
           }
-        ) })
-      ] }) })
+        )
+      ]
     }
   );
 }
-const g = {
+const v = {
   "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",
@@ -167,20 +206,20 @@ const g = {
   "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: i, remove: r } = A(), s = g[i.position] ?? g["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((o) => /* @__PURE__ */ t(B, { toast: o, config: i, onRemove: r }, o.id))
+      children: e.map((n) => /* @__PURE__ */ t(j, { toast: n, config: i, position: i.position, onRemove: l }, n.id))
     }
   );
 }
 export {
-  B as ToastItem,
-  j as ToastProvider,
-  K as Toasts,
-  A 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.1",
+  "version": "0.2.1",
   "description": "React toast components for Laravel Inertia Toast",
   "license": "MIT",
   "type": "module",
@@ -15,14 +15,15 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly",
     "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"
   },