@laravel-inertia-toast/react 0.1.0

package/dist/components/ToastItem.d.ts

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

package/dist/components/Toasts.d.ts

@@ -0,0 +1 @@
+export declare function Toasts(): import("react/jsx-runtime").JSX.Element;

package/dist/context.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ToastConfig, ToastItem } from './types';
+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;
+    remove: (id: string) => void;
+    clear: () => void;
+}
+export declare const ToastContext: React.Context<ToastContextValue | null>;
+export interface ToastProviderProps {
+    children: React.ReactNode;
+    config?: Partial<ToastConfig>;
+}
+export declare function ToastProvider({ children, config: configOverrides }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,2 @@
+import { type ToastContextValue } from '../context';
+export declare function useToast(): ToastContextValue;

package/dist/index.cjs

@@ -0,0 +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;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { ToastProvider } from './context';
+export type { ToastProviderProps, ToastContextValue } from './context';
+export { useToast } from './hooks/useToast';
+export { Toasts } from './components/Toasts';
+export { ToastItem } from './components/ToastItem';
+export type { ToastLevel, ToastMessage, ToastItem as ToastItemType, ToastConfig } from './types';

package/dist/index.js

@@ -0,0 +1,186 @@
+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;
+function z() {
+  return `toast-${++L}-${Date.now()}`;
+}
+const M = {
+  duration: 5e3,
+  position: "top-right",
+  maxVisible: 5,
+  propKey: "toasts"
+};
+function A(e, i) {
+  switch (i.type) {
+    case "ADD": {
+      const s = [{
+        ...i.payload,
+        id: z()
+      }, ...e.items].slice(0, e.config.maxVisible);
+      return { ...e, items: s };
+    }
+    case "REMOVE":
+      return {
+        ...e,
+        items: e.items.filter((n) => n.id !== i.payload)
+      };
+    case "CLEAR":
+      return { ...e, items: [] };
+    default:
+      return e;
+  }
+}
+const w = y(null);
+function K({ children: e, config: i }) {
+  const n = { ...M, ...i }, [s, l] = C(A, {
+    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 });
+    });
+  }), [f.props]);
+  const a = c((o, r, u) => {
+    l({
+      type: "ADD",
+      payload: { message: o, level: r, 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" }), [])
+  };
+  return /* @__PURE__ */ t(w.Provider, { value: b, children: e });
+}
+function E() {
+  const e = k(w);
+  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"
+};
+function T() {
+  return /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
+    "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 I() {
+  return /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
+    "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 D() {
+  return /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
+    "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 $() {
+  return /* @__PURE__ */ t("svg", { className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ t(
+    "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 B({ level: e }) {
+  switch (e) {
+    case "success":
+      return /* @__PURE__ */ t(T, {});
+    case "error":
+      return /* @__PURE__ */ t(I, {});
+    case "warning":
+      return /* @__PURE__ */ t(D, {});
+    default:
+      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(
+    "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}`,
+      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(
+          "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),
+            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" }) })
+            ]
+          }
+        ) })
+      ] }) })
+    }
+  );
+}
+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",
+  "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 O() {
+  const { items: e, config: i, remove: n } = E(), s = 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}`,
+      "aria-live": "polite",
+      children: e.map((l) => /* @__PURE__ */ t(P, { toast: l, config: i, onRemove: n }, l.id))
+    }
+  );
+}
+export {
+  P as ToastItem,
+  K as ToastProvider,
+  O as Toasts,
+  E as useToast
+};

package/dist/types.d.ts

@@ -0,0 +1,15 @@
+export type ToastLevel = 'success' | 'error' | 'info' | 'warning';
+export interface ToastMessage {
+    message: string;
+    level: ToastLevel;
+    duration: number | null;
+}
+export interface ToastItem extends ToastMessage {
+    id: string;
+}
+export interface ToastConfig {
+    duration: number;
+    position: string;
+    maxVisible: number;
+    propKey: string;
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@laravel-inertia-toast/react",
+  "version": "0.1.0",
+  "description": "React toast components for Laravel Inertia Toast",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "@inertiajs/react": "^1.0.0 || ^2.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@inertiajs/react": "^2.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^6.0.0"
+  },
+  "keywords": [
+    "laravel",
+    "inertia",
+    "toast",
+    "react",
+    "notifications"
+  ]
+}