UNPKG

react-toast-kit

Version:

A modern, accessible toast notification system for React applications with automatic CSS injection

4 lines 35.4 kB
"use client"; 'use strict';var I=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var I__namespace=/*#__PURE__*/_interopNamespace(I);var E=r=>{let t,o=new Set,i=(u,m)=>{let p=typeof u=="function"?u(t):u;if(!Object.is(p,t)){let g=t;t=m??(typeof p!="object"||p===null)?p:Object.assign({},t,p),o.forEach(h=>h(t,g));}},d=()=>t,v={setState:i,getState:d,getInitialState:()=>n,subscribe:u=>(o.add(u),()=>o.delete(u))},n=t=r(i,d,v);return v},L=r=>r?E(r):E;var Y=r=>r;function tt(r,t=Y){let o=I__namespace.default.useSyncExternalStore(r.subscribe,()=>t(r.getState()),()=>t(r.getInitialState()));return I__namespace.default.useDebugValue(o),o}var j=r=>{let t=L(r),o=i=>tt(t,i);return Object.assign(o,t),o},z=r=>r?j(r):j;var et={defaultDuration:4e3,defaultDismissible:true,defaultPauseOnHover:true,defaultDismissOnClick:false,defaultAnimation:"slide",defaultStyle:"solid",defaultProgressBarPosition:"bottom",defaultProgressBarThickness:3,defaultProgressAnimation:"linear",defaultFloating:false,defaultRippleEffect:false,defaultSwipeToDismiss:false,defaultPriority:"normal",defaultStagger:0},ot="top-right",N="system",it=3,V=()=>{if(typeof window>"u"||typeof window.matchMedia!="function")return "light";try{return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}catch{return "light"}},S=z((r,t)=>({toasts:[],maxToasts:it,theme:N,effectiveTheme:V(),pausedToasts:new Set,activeTimers:new Map,timerStartedAt:new Map,remainingTime:new Map,plugins:[],config:et,setConfig:o=>{r(i=>({config:{...i.config,...o}}));},addToast:o=>{try{let{plugins:i,activeTimers:d,pausedToasts:f}=t(),a=o;for(let p of i)if(p.beforeCreate){let g=p.beforeCreate(a),h;(g.style||a.style)&&(h={...a.style||{},...g.style||{}}),a={...a,...g,id:g.id||a.id,variant:g.variant||a.variant,position:g.position||a.position,duration:g.duration!==void 0?g.duration:a.duration,pauseOnHover:g.pauseOnHover!==void 0?g.pauseOnHover:a.pauseOnHover,dismissible:g.dismissible!==void 0?g.dismissible:a.dismissible,dismissOnClick:g.dismissOnClick!==void 0?g.dismissOnClick:a.dismissOnClick,theme:g.theme||a.theme,createdAt:a.createdAt,style:h,iconString:a.iconString,updating:a.updating};}let v=t().toasts;if(v.length>=t().maxToasts){let p=[...v].sort((g,h)=>g.createdAt-h.createdAt).find(g=>g.id!==a.id);p&&t().removeToast(p.id);}let n=t().toasts,u=n.length;if(a.priority==="high")u=0;else if(a.priority==="normal"){let p=n.findIndex(g=>g.priority==="low");p!==-1&&(u=p);}let m=[...n];if(m.splice(u,0,a),r({toasts:m}),a.duration>0&&!f.has(a.id)){let p=d.get(a.id);p&&clearTimeout(p);let g=Date.now(),h=window.setTimeout(()=>{t().removeToast(a.id);},a.duration);r(k=>({activeTimers:new Map(k.activeTimers).set(a.id,h),timerStartedAt:new Map(k.timerStartedAt).set(a.id,g)}));}for(let p of i)p.afterCreate?.(a);return a.id}catch(i){return console.error("React Toast Kit: Failed to add toast",i),""}},removeToast:o=>{try{let{toasts:i,plugins:d,activeTimers:f}=t(),a=i.find(u=>u.id===o);if(!a)return;let v=!0;for(let u of d)u.beforeRemove?.(a)===!1&&(v=!1);if(!v)return;let n=f.get(o);n&&clearTimeout(n),a.onDismiss?.(o),r(u=>{let m=new Map(u.activeTimers);m.delete(o);let p=new Map(u.timerStartedAt);p.delete(o);let g=new Map(u.remainingTime);g.delete(o);let h=new Set(u.pausedToasts);return h.delete(o),{toasts:u.toasts.filter(k=>k.id!==o),pausedToasts:h,activeTimers:m,timerStartedAt:p,remainingTime:g}});for(let u of d)u.afterRemove?.(a);}catch(i){console.error("React Toast Kit: Failed to remove toast",i);}},updateToast:(o,i)=>{try{if(r(d=>({toasts:d.toasts.map(f=>f.id===o?{...f,...i,updating:!0}:f)})),i.duration!==void 0){let{activeTimers:d,pausedToasts:f}=t(),a=d.get(o);a&&clearTimeout(a);let v=t().toasts.find(n=>n.id===o);if(v&&v.duration>0&&!f.has(o)){let n=Date.now(),u=window.setTimeout(()=>{t().removeToast(o);},v.duration);r(m=>({activeTimers:new Map(m.activeTimers).set(o,u),timerStartedAt:new Map(m.timerStartedAt).set(o,n),remainingTime:(()=>{let p=new Map(m.remainingTime);return p.delete(o),p})()}));}}setTimeout(()=>{r(d=>({toasts:d.toasts.map(f=>f.id===o?{...f,updating:!1}:f)}));},100);}catch(d){console.error("React Toast Kit: Failed to update toast",d);}},pauseToast:o=>{let{activeTimers:i,timerStartedAt:d}=t(),f=i.get(o);if(f){clearTimeout(f);let a=d.get(o),v=t().toasts.find(n=>n.id===o);if(a!==void 0&&v){let n=Date.now()-a,u=Math.max(0,v.duration-n);r(m=>{let p=new Map(m.activeTimers);p.delete(o);let g=new Map(m.timerStartedAt);g.delete(o);let h=new Map(m.remainingTime).set(o,u);return {activeTimers:p,timerStartedAt:g,remainingTime:h}});}else r(n=>{let u=new Map(n.activeTimers);return u.delete(o),{activeTimers:u}});}r(a=>({pausedToasts:new Set(a.pausedToasts).add(o)}));},resumeToast:o=>{let{remainingTime:i,toasts:d}=t();r(v=>{let n=new Set(v.pausedToasts);return n.delete(o),{pausedToasts:n}});let f=d.find(v=>v.id===o);if(!f||f.duration<=0)return;let a=i.get(o)??Math.max(0,f.duration-(Date.now()-f.createdAt));if(a>0){let v=Date.now(),n=window.setTimeout(()=>{t().removeToast(o);},a);r(u=>{let m=new Map(u.remainingTime);return m.delete(o),{activeTimers:new Map(u.activeTimers).set(o,n),timerStartedAt:new Map(u.timerStartedAt).set(o,v),remainingTime:m}});}},clearAllToasts:()=>{try{let{toasts:o,activeTimers:i}=t();i.forEach(d=>clearTimeout(d)),o.forEach(d=>d.onDismiss?.(d.id)),r({toasts:[],pausedToasts:new Set,activeTimers:new Map,timerStartedAt:new Map,remainingTime:new Map});}catch(o){console.error("React Toast Kit: Failed to clear all toasts",o);}},setTheme:o=>{r({theme:o}),t().updateEffectiveTheme();},setMaxToasts:o=>{r({maxToasts:Math.max(1,o)});},updateEffectiveTheme:()=>{let{theme:o}=t(),i=o==="system"?V():o;r({effectiveTheme:i});},cleanup:()=>{try{let{activeTimers:o,toasts:i}=t();o.forEach(d=>clearTimeout(d)),i.forEach(d=>d.onDismiss?.(d.id)),r({toasts:[],pausedToasts:new Set,activeTimers:new Map,timerStartedAt:new Map,remainingTime:new Map});}catch(o){console.error("React Toast Kit: Failed to cleanup",o);}},registerPlugin:o=>{r(i=>({plugins:[...i.plugins.filter(d=>d.name!==o.name),o]}));},unregisterPlugin:o=>{r(i=>({plugins:i.plugins.filter(d=>d.name!==o)}));}}));if(typeof window<"u"&&typeof window.matchMedia=="function")try{let r=window.matchMedia("(prefers-color-scheme: dark)"),t=()=>{S.getState().theme==="system"&&S.getState().updateEffectiveTheme();};typeof r.addEventListener=="function"?r.addEventListener("change",t):r.addListener?.(t),S.getState().updateEffectiveTheme();}catch{}var st=()=>Math.random().toString(36).substring(2,9),H={success:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Success"><path d="M10 18.3333C14.6024 18.3333 18.3334 14.6023 18.3334 9.99996C18.3334 5.39759 14.6024 1.66663 10 1.66663C5.39765 1.66663 1.66669 5.39759 1.66669 9.99996C1.66669 14.6023 5.39765 18.3333 10 18.3333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.66669 10L9.16669 12.5L13.3334 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',error:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Error"><path d="M10 18.3333C14.6024 18.3333 18.3334 14.6023 18.3334 9.99996C18.3334 5.39759 14.6024 1.66663 10 1.66663C5.39765 1.66663 1.66669 5.39759 1.66669 9.99996C1.66669 14.6023 5.39765 18.3333 10 18.3333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.5 7.5L7.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.5 7.5L12.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',warning:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Warning"><path d="M8.57465 3.21667L1.51632 15C1.37079 15.2589 1.29379 15.5503 1.29298 15.8469C1.29216 16.1434 1.36756 16.4353 1.51175 16.6951C1.65593 16.9548 1.86359 17.1738 2.11656 17.3309C2.36954 17.4879 2.65908 17.5778 2.95548 17.5917H17.0721C17.3685 17.5778 17.6581 17.4879 17.9111 17.3309C18.164 17.1738 18.3717 16.9548 18.5159 16.6951C18.6601 16.4353 18.7355 16.1434 18.7347 15.8469C18.7339 15.5503 18.6569 15.2589 18.5113 15L11.453 3.21667C11.3018 2.96735 11.0893 2.7609 10.8353 2.61224C10.5813 2.46357 10.294 2.3779 10.0005 2.3646C9.7069 2.37798 9.41956 2.46374 9.16556 2.61247C8.91156 2.76121 8.69907 2.96773 8.54798 3.21708L8.57465 3.21667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 7.5V10.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 14.1667H10.0083" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',info:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Info"><path d="M10 18.3333C14.6024 18.3333 18.3334 14.6023 18.3334 9.99996C18.3334 5.39759 14.6024 1.66663 10 1.66663C5.39765 1.66663 1.66669 5.39759 1.66669 9.99996C1.66669 14.6023 5.39765 18.3333 10 18.3333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 13.3333V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 6.66663H10.0083" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',default:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Notification"><path d="M18.3334 10C18.3334 14.6024 14.6024 18.3333 10 18.3333C5.39765 18.3333 1.66669 14.6024 1.66669 10C1.66669 5.39763 5.39765 1.66667 10 1.66667C14.6024 1.66667 18.3334 5.39763 18.3334 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 6.66667V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 13.3333H10.0083" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',loading:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="animate-spin" role="img" aria-label="Loading"><path d="M10 3.33337V5.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 15V16.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.1084 4.1084L5.2834 5.28257" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.7166 14.7167L15.8916 15.8917" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.33337 10H5.00004" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 10H16.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.1084 15.8917L5.2834 14.7167" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.7166 5.28257L15.8916 4.1084" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'},R=r=>{try{let t=S.getState().config,o={duration:t.defaultDuration,dismissible:t.defaultDismissible,pauseOnHover:t.defaultPauseOnHover,dismissOnClick:t.defaultDismissOnClick,animation:t.defaultAnimation,visualStyle:t.defaultStyle,progressBarStyle:t.defaultProgressBarStyle,progressBarColor:t.defaultProgressBarColor,progressBarPosition:t.defaultProgressBarPosition,progressBarThickness:t.defaultProgressBarThickness,progressAnimation:t.defaultProgressAnimation,floating:t.defaultFloating,rippleEffect:t.defaultRippleEffect,swipeToDismiss:t.defaultSwipeToDismiss,priority:t.defaultPriority,stagger:t.defaultStagger},i=typeof r=="string"?{...o,description:r}:{...o,...r};t.globalClassName&&(i.className=i.className?`${t.globalClassName} ${i.className}`:t.globalClassName),t.globalStyle&&(i.style={...t.globalStyle,...i.style||{}});let d={id:i.id||st(),variant:i.variant||"default",position:i.position||ot,duration:i.duration??t.defaultDuration,pauseOnHover:i.pauseOnHover??!0,dismissible:i.dismissible??!0,dismissOnClick:i.dismissOnClick??!1,theme:i.theme||N,title:i.title,description:i.description,icon:i.icon,component:i.component,createdAt:Date.now(),onDismiss:i.onDismiss,className:i.className,style:i.style,animation:i.animation,customAnimation:i.customAnimation,visualStyle:i.visualStyle,progressBarStyle:i.progressBarStyle,progressBarColor:i.progressBarColor,progressBarPosition:i.progressBarPosition,progressBarThickness:i.progressBarThickness,floating:i.floating,emoji:i.emoji,rippleEffect:i.rippleEffect,stagger:i.stagger,swipeToDismiss:i.swipeToDismiss,priority:i.priority,progressAnimation:i.progressAnimation,actions:i.actions};return !d.icon&&!d.emoji&&d.variant&&d.variant in H&&(d.iconString=H[d.variant]),S.getState().addToast(d)}catch(t){return console.error("React Toast Kit: Failed to create toast",t),""}},P=r=>t=>R({...typeof t=="string"?{description:t}:t,variant:r}),b=r=>R(r);b.success=P("success");b.error=P("error");b.warning=P("warning");b.info=P("info");b.loading=P("loading");b.custom=(r,t={})=>R({...t,component:r,variant:"custom"});b.promise=async(r,t)=>{let o=typeof t.loading=="string"?{description:t.loading}:t.loading,i=R({...o,variant:"loading",duration:0}),d=S.getState().config.defaultDuration;try{let f=await r,a=typeof t.success=="function"?t.success(f):t.success;return b.update(i,typeof a=="string"?{description:a,variant:"success",duration:d}:{...a,variant:"success",duration:a.duration??d}),f}catch(f){let a=typeof t.error=="function"?t.error(f):t.error;throw b.update(i,typeof a=="string"?{description:a,variant:"error",duration:d}:{...a,variant:"error",duration:a.duration??d}),f}};b.update=(r,t)=>{try{S.getState().toasts.find(i=>i.id===r)?.variant==="loading"&&t.variant&&t.variant!=="loading"&&!t.duration&&(t.duration=S.getState().config.defaultDuration),S.getState().updateToast(r,t);}catch(o){console.error("React Toast Kit: Failed to update toast",o);}};b.dismiss=r=>{r?S.getState().removeToast(r):S.getState().clearAllToasts();};b.clearAll=()=>{S.getState().clearAllToasts();};var rt={show:()=>{typeof window<"u"&&window.dispatchEvent(new CustomEvent("react-toast-kit:devtools:show"));},hide:()=>{typeof window<"u"&&window.dispatchEvent(new CustomEvent("react-toast-kit:devtools:hide"));},toggle:()=>{typeof window<"u"&&window.dispatchEvent(new CustomEvent("react-toast-kit:devtools:toggle"));},getToasts:()=>S.getState().toasts,...typeof process<"u"&&process.env.NODE_ENV==="development"?{getActiveToasts:()=>S.getState().toasts,clearAll:()=>S.getState().clearAllToasts(),debugInfo:()=>{let r=S.getState();console.group("React Toast Kit Debug Info"),console.table(r.toasts.map(t=>({id:t.id,variant:t.variant,position:t.position,duration:t.duration,priority:t.priority,createdAt:new Date(t.createdAt).toLocaleTimeString()}))),console.log("Theme:",r.theme,"| Effective:",r.effectiveTheme),console.log("Paused toasts:",Array.from(r.pausedToasts)),console.log("Active timers:",r.activeTimers.size),console.log("Registered plugins:",r.plugins.map(t=>t.name)),console.groupEnd();},getStore:()=>S.getState(),simulateError:()=>b.error("Test error toast for debugging"),simulateSuccess:()=>b.success("Test success toast for debugging")}:{}};var {useState:A,useEffect:at,useCallback:lt,useMemo:K}=I__namespace,O=()=>{let[r,t]=A(false),[o,i]=A("monitor"),[d,f]=A(false),{toasts:a,theme:v,effectiveTheme:n,maxToasts:u,pausedToasts:m,activeTimers:p,plugins:g,clearAllToasts:h,removeToast:k,pauseToast:X,resumeToast:_,setTheme:q,setMaxToasts:J}=S(),[w,x]=A({title:"Test Toast",description:"This is a test toast for debugging",variant:"info",position:"top-right",animation:"slide",visualStyle:"solid",duration:4e3,pauseOnHover:true,dismissible:true}),D=K(()=>{let s=a.reduce((y,C)=>(y[C.variant]=(y[C.variant]||0)+1,y),{}),T=a.reduce((y,C)=>(y[C.position]=(y[C.position]||0)+1,y),{});return {total:a.length,paused:m.size,timers:p.size,byVariant:s,byPosition:T}},[a,m,p]),Z={success:()=>b.success("\u2705 Success toast test"),error:()=>b.error("\u274C Error toast test"),warning:()=>b.warning("\u26A0\uFE0F Warning toast test"),info:()=>b.info("\u2139\uFE0F Info toast test"),loading:()=>b.loading("\u23F3 Loading toast test"),custom:()=>b.custom(jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[jsxRuntime.jsx("span",{style:{fontSize:"24px"},children:"\u{1F389}"}),jsxRuntime.jsx("span",{children:"Custom component toast!"})]})),promise:()=>{let s=new Promise((T,y)=>{setTimeout(()=>Math.random()>.5?T("Success!"):y("Failed!"),2e3);});b.promise(s,{loading:"Loading...",success:"Promise resolved!",error:"Promise rejected!"});},stress:()=>{for(let s=0;s<5;s++)setTimeout(()=>{b({title:`Stress test toast #${s+1}`,description:"Testing multiple toasts at once",variant:["success","error","warning","info"][s%4],position:["top-left","top-right","bottom-left","bottom-right"][s%4],duration:2e3});},s*200);}},U=lt(()=>{b(w);},[w]);at(()=>{let s=T=>{T.altKey&&T.shiftKey&&T.key==="D"&&t(y=>!y);};return window.addEventListener("keydown",s),()=>window.removeEventListener("keydown",s)},[]);let Q=(s="default")=>{switch(s){case "success":return {background:"#dcfce7",color:"#166534"};case "error":return {background:"#fee2e2",color:"#b91c1c"};case "warning":return {background:"#fef3c7",color:"#92400e"};case "info":return {background:"#dbeafe",color:"#1e40af"};case "loading":return {background:"#f3f4f6",color:"#4b5563"};default:return {background:"#f1f5f9",color:"#334155"}}},l=K(()=>({devToolsButton:{position:"fixed",bottom:"16px",right:"16px",zIndex:1e4,width:"48px",height:"48px",borderRadius:"24px",background:"linear-gradient(135deg, #3b82f6, #8b5cf6)",color:"white",boxShadow:"0 4px 12px rgba(59, 130, 246, 0.5)",border:"none",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"transform 0.2s"},devToolsPanel:{position:"fixed",bottom:"16px",right:"16px",zIndex:1e4,width:d?"320px":"380px",height:d?"48px":"600px",background:n==="dark"?"#1f2937":"white",borderRadius:"8px",boxShadow:"0 10px 25px rgba(0, 0, 0, 0.2)",border:`1px solid ${n==="dark"?"#374151":"#e5e7eb"}`,overflow:"hidden",fontFamily:"system-ui, sans-serif",display:"flex",flexDirection:"column"},panelHeader:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 16px",background:n==="dark"?"#111827":"#f0f9ff",borderBottom:`1px solid ${n==="dark"?"#374151":"#e5e7eb"}`},headerTitle:{display:"flex",alignItems:"center",gap:"8px",fontWeight:600,fontSize:"14px",color:n==="dark"?"#f3f4f6":"#1f2937"},statusIndicator:{width:"8px",height:"8px",borderRadius:"4px",background:"#22c55e"},tabsContainer:{display:"flex",borderBottom:`1px solid ${n==="dark"?"#374151":"#e5e7eb"}`},tab:s=>({flex:1,padding:"10px",textAlign:"center",fontSize:"13px",color:s?n==="dark"?"#60a5fa":"#3b82f6":n==="dark"?"#9ca3af":"#64748b",background:s?n==="dark"?"#111827":"white":n==="dark"?"#1f2937":"#f8fafc",cursor:"pointer",borderBottom:s?`2px solid ${n==="dark"?"#60a5fa":"#3b82f6"}`:"2px solid transparent"}),contentContainer:{padding:"16px",overflowY:"auto",flex:1,fontSize:"14px"},statsGrid:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:"8px",marginBottom:"16px"},statCard:(s=false)=>({padding:"12px",borderRadius:"6px",background:n==="dark"?s?"#422006":"#082f49":s?"#fef3c7":"#f0f9ff",display:"flex",flexDirection:"column"}),statTitle:(s=false)=>({fontSize:"12px",fontWeight:500,color:n==="dark"?s?"#fcd34d":"#93c5fd":s?"#b45309":"#0369a1",marginBottom:"4px"}),statValue:(s=false)=>({fontSize:"20px",fontWeight:700,color:n==="dark"?s?"#fbbf24":"#bfdbfe":s?"#92400e":"#0c4a6e"}),sectionTitle:{fontWeight:600,color:n==="dark"?"#e2e8f0":"#334155",margin:"16px 0 8px"},quickTestsGrid:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:"8px",marginBottom:"16px"},quickTestButton:{padding:"8px",borderRadius:"6px",background:n==="dark"?"#1f2937":"#f1f5f9",border:"none",color:n==="dark"?"#d1d5db":"#334155",fontSize:"12px",cursor:"pointer",textAlign:"left"},toastsList:{display:"flex",flexDirection:"column",gap:"8px",maxHeight:"240px",overflowY:"auto"},toastItem:{padding:"10px",borderRadius:"6px",background:n==="dark"?"#1f2937":"#f8fafc",border:`1px solid ${n==="dark"?"#374151":"#e2e8f0"}`},toastHeader:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"6px"},variantBadge:(s="default")=>{let T=Q(s);return {padding:"2px 6px",borderRadius:"4px",fontSize:"11px",fontWeight:500,background:T.background,color:T.color}},toastActions:{display:"flex",gap:"4px"},actionButton:s=>({background:"none",border:"none",fontSize:"11px",cursor:"pointer",padding:"2px 4px",borderRadius:"4px",color:s}),toastContent:{fontSize:"12px",color:n==="dark"?"#cbd5e1":"#475569"},toastTitle:{fontWeight:500,color:n==="dark"?"#e2e8f0":"#334155",marginBottom:"2px"},toastDescription:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},toastMeta:{marginTop:"4px",fontSize:"11px",color:n==="dark"?"#64748b":"#94a3b8"},inputGroup:{marginBottom:"12px"},inputLabel:{display:"block",fontSize:"12px",fontWeight:500,color:n==="dark"?"#e2e8f0":"#334155",marginBottom:"4px"},textInput:{width:"100%",padding:"8px",border:`1px solid ${n==="dark"?"#374151":"#cbd5e1"}`,borderRadius:"4px",fontSize:"12px",background:n==="dark"?"#1f2937":"white",color:n==="dark"?"#f1f5f9":"inherit"},selectInput:{width:"100%",padding:"8px",border:`1px solid ${n==="dark"?"#374151":"#cbd5e1"}`,borderRadius:"4px",fontSize:"12px",background:n==="dark"?"#1f2937":"white",color:n==="dark"?"#f1f5f9":"inherit"},createButton:{width:"100%",padding:"8px",background:"#3b82f6",color:"white",border:"none",borderRadius:"4px",fontSize:"13px",fontWeight:500,cursor:"pointer"},formGrid:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"8px"}}),[n,d]);return typeof process<"u"&&process.env.NODE_ENV==="production"?null:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!r&&jsxRuntime.jsx("button",{onClick:()=>t(true),style:l.devToolsButton,title:"Open Toast DevTools (Alt+Shift+D)",children:jsxRuntime.jsxs("svg",{width:"24",height:"24",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:[jsxRuntime.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"}),jsxRuntime.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"})]})}),r&&jsxRuntime.jsxs("div",{style:l.devToolsPanel,children:[jsxRuntime.jsxs("div",{style:l.panelHeader,children:[jsxRuntime.jsxs("div",{style:l.headerTitle,children:[jsxRuntime.jsx("div",{style:l.statusIndicator}),jsxRuntime.jsx("span",{children:"React Toast Kit DevTools"}),jsxRuntime.jsxs("span",{style:{fontSize:"11px",padding:"2px 6px",borderRadius:"4px",background:n==="dark"?"#0c4a6e":"#dbeafe",color:n==="dark"?"#bfdbfe":"#1e40af"},children:[D.total," active"]})]}),jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px"},children:[jsxRuntime.jsx("button",{onClick:()=>f(!d),style:{padding:"4px",background:"transparent",border:"none",cursor:"pointer",color:n==="dark"?"#9ca3af":"#64748b"},title:d?"Expand":"Minimize",children:jsxRuntime.jsx("svg",{width:"16",height:"16",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:d?"M7 14l5-5 5 5":"M17 10l-5 5-5-5"})})}),jsxRuntime.jsx("button",{onClick:()=>t(false),style:{padding:"4px",background:"transparent",border:"none",cursor:"pointer",color:"#ef4444"},title:"Close DevTools",children:jsxRuntime.jsx("svg",{width:"16",height:"16",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]})]}),!d&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{style:l.tabsContainer,children:[{key:"monitor",label:"Monitor",icon:"\u{1F4CA}"},{key:"create",label:"Create",icon:"\u2795"},{key:"settings",label:"Settings",icon:"\u2699\uFE0F"}].map(s=>jsxRuntime.jsxs("button",{onClick:()=>i(s.key),style:l.tab(o===s.key),children:[jsxRuntime.jsx("span",{style:{marginRight:"4px"},children:s.icon}),s.label]},s.key))}),jsxRuntime.jsxs("div",{style:l.contentContainer,children:[o==="monitor"&&jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs("div",{style:l.statsGrid,children:[jsxRuntime.jsxs("div",{style:l.statCard(),children:[jsxRuntime.jsx("div",{style:l.statTitle(),children:"Total"}),jsxRuntime.jsx("div",{style:l.statValue(),children:D.total})]}),jsxRuntime.jsxs("div",{style:l.statCard(true),children:[jsxRuntime.jsx("div",{style:l.statTitle(true),children:"Paused"}),jsxRuntime.jsx("div",{style:l.statValue(true),children:D.paused})]})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("h3",{style:l.sectionTitle,children:"Quick Tests"}),jsxRuntime.jsx("div",{style:l.quickTestsGrid,children:Object.entries(Z).map(([s,T])=>jsxRuntime.jsx("button",{onClick:T,style:l.quickTestButton,children:s.charAt(0).toUpperCase()+s.slice(1)},s))})]}),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"8px"},children:[jsxRuntime.jsx("h3",{style:l.sectionTitle,children:"Active Toasts"}),a.length>0&&jsxRuntime.jsx("button",{onClick:h,style:{fontSize:"12px",color:"#ef4444",background:"transparent",border:"none",cursor:"pointer",textDecoration:"underline"},children:"Clear All"})]}),jsxRuntime.jsx("div",{style:l.toastsList,children:a.length===0?jsxRuntime.jsx("div",{style:{textAlign:"center",padding:"16px",color:n==="dark"?"#9ca3af":"#64748b"},children:"No active toasts"}):a.map(s=>jsxRuntime.jsxs("div",{style:l.toastItem,children:[jsxRuntime.jsxs("div",{style:l.toastHeader,children:[jsxRuntime.jsx("span",{style:l.variantBadge(s.variant),children:s.variant||"default"}),jsxRuntime.jsxs("div",{style:l.toastActions,children:[jsxRuntime.jsx("button",{onClick:()=>m.has(s.id)?_(s.id):X(s.id),style:l.actionButton("#2563eb"),children:m.has(s.id)?"\u25B6\uFE0F":"\u23F8\uFE0F"}),jsxRuntime.jsx("button",{onClick:()=>k(s.id),style:l.actionButton("#ef4444"),children:"\u274C"})]})]}),jsxRuntime.jsxs("div",{style:l.toastContent,children:[jsxRuntime.jsx("div",{style:l.toastTitle,children:s.title||"No title"}),s.description&&jsxRuntime.jsx("div",{style:l.toastDescription,children:s.description}),jsxRuntime.jsxs("div",{style:l.toastMeta,children:[s.position," \u2022 ",s.animation||"slide"," \u2022 ",s.duration,"ms"]})]})]},s.id))})]})]}),o==="create"&&jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("h3",{style:l.sectionTitle,children:"Create Test Toast"}),jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[jsxRuntime.jsxs("div",{style:l.inputGroup,children:[jsxRuntime.jsx("label",{style:l.inputLabel,children:"Title"}),jsxRuntime.jsx("input",{type:"text",value:w.title||"",onChange:s=>x(T=>({...T,title:s.target.value})),style:l.textInput})]}),jsxRuntime.jsxs("div",{style:l.inputGroup,children:[jsxRuntime.jsx("label",{style:l.inputLabel,children:"Description"}),jsxRuntime.jsx("textarea",{value:w.description||"",onChange:s=>x(T=>({...T,description:s.target.value})),style:{...l.textInput,minHeight:"60px",resize:"vertical"},rows:2})]}),jsxRuntime.jsxs("div",{style:l.formGrid,children:[jsxRuntime.jsxs("div",{style:l.inputGroup,children:[jsxRuntime.jsx("label",{style:l.inputLabel,children:"Variant"}),jsxRuntime.jsxs("select",{value:w.variant||"default",onChange:s=>x(T=>({...T,variant:s.target.value})),style:l.selectInput,children:[jsxRuntime.jsx("option",{value:"default",children:"Default"}),jsxRuntime.jsx("option",{value:"success",children:"Success"}),jsxRuntime.jsx("option",{value:"error",children:"Error"}),jsxRuntime.jsx("option",{value:"warning",children:"Warning"}),jsxRuntime.jsx("option",{value:"info",children:"Info"}),jsxRuntime.jsx("option",{value:"loading",children:"Loading"})]})]}),jsxRuntime.jsxs("div",{style:l.inputGroup,children:[jsxRuntime.jsx("label",{style:l.inputLabel,children:"Position"}),jsxRuntime.jsxs("select",{value:w.position||"top-right",onChange:s=>x(T=>({...T,position:s.target.value})),style:l.selectInput,children:[jsxRuntime.jsx("option",{value:"top-left",children:"Top Left"}),jsxRuntime.jsx("option",{value:"top-center",children:"Top Center"}),jsxRuntime.jsx("option",{value:"top-right",children:"Top Right"}),jsxRuntime.jsx("option",{value:"bottom-left",children:"Bottom Left"}),jsxRuntime.jsx("option",{value:"bottom-center",children:"Bottom Center"}),jsxRuntime.jsx("option",{value:"bottom-right",children:"Bottom Right"})]})]})]}),jsxRuntime.jsxs("div",{style:l.formGrid,children:[jsxRuntime.jsxs("div",{style:l.inputGroup,children:[jsxRuntime.jsx("label",{style:l.inputLabel,children:"Animation"}),jsxRuntime.jsxs("select",{value:w.animation||"slide",onChange:s=>x(T=>({...T,animation:s.target.value})),style:l.selectInput,children:[jsxRuntime.jsx("option",{value:"slide",children:"Slide"}),jsxRuntime.jsx("option",{value:"fade",children:"Fade"}),jsxRuntime.jsx("option",{value:"bounce",children:"Bounce"}),jsxRuntime.jsx("option",{value:"flip",children:"Flip"}),jsxRuntime.jsx("option",{value:"zoom",children:"Zoom"}),jsxRuntime.jsx("option",{value:"elastic",children:"Elastic"}),jsxRuntime.jsx("option",{value:"none",children:"None"})]})]}),jsxRuntime.jsxs("div",{style:l.inputGroup,children:[jsxRuntime.jsx("label",{style:l.inputLabel,children:"Style"}),jsxRuntime.jsxs("select",{value:w.visualStyle||"solid",onChange:s=>x(T=>({...T,visualStyle:s.target.value})),style:l.selectInput,children:[jsxRuntime.jsx("option",{value:"solid",children:"Solid"}),jsxRuntime.jsx("option",{value:"minimal",children:"Minimal"}),jsxRuntime.jsx("option",{value:"outlined",children:"Outlined"}),jsxRuntime.jsx("option",{value:"glass",children:"Glass"}),jsxRuntime.jsx("option",{value:"gradient",children:"Gradient"}),jsxRuntime.jsx("option",{value:"shimmer",children:"Shimmer"}),jsxRuntime.jsx("option",{value:"pill",children:"Pill"}),jsxRuntime.jsx("option",{value:"neon",children:"Neon"}),jsxRuntime.jsx("option",{value:"retro",children:"Retro"}),jsxRuntime.jsx("option",{value:"confetti",children:"Confetti"})]})]})]}),jsxRuntime.jsxs("div",{style:l.inputGroup,children:[jsxRuntime.jsx("label",{style:l.inputLabel,children:"Duration (ms)"}),jsxRuntime.jsx("input",{type:"number",value:w.duration||4e3,onChange:s=>x(T=>({...T,duration:parseInt(s.target.value)})),style:l.textInput})]}),jsxRuntime.jsx("button",{onClick:U,style:l.createButton,children:"Create Toast"})]})]}),o==="settings"&&jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("h3",{style:l.sectionTitle,children:"Global Settings"}),jsxRuntime.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[jsxRuntime.jsxs("div",{style:l.inputGroup,children:[jsxRuntime.jsx("label",{style:l.inputLabel,children:"Theme"}),jsxRuntime.jsxs("select",{value:v,onChange:s=>q(s.target.value),style:l.selectInput,children:[jsxRuntime.jsx("option",{value:"light",children:"Light"}),jsxRuntime.jsx("option",{value:"dark",children:"Dark"}),jsxRuntime.jsx("option",{value:"system",children:"System"})]}),jsxRuntime.jsxs("div",{style:{fontSize:"11px",color:n==="dark"?"#64748b":"#94a3b8",marginTop:"4px"},children:["Current: ",n]})]}),jsxRuntime.jsxs("div",{style:l.inputGroup,children:[jsxRuntime.jsx("label",{style:l.inputLabel,children:"Max Toasts"}),jsxRuntime.jsx("input",{type:"number",value:u,onChange:s=>J(parseInt(s.target.value)),min:"1",max:"10",style:l.textInput})]}),jsxRuntime.jsxs("div",{style:{marginTop:"16px",paddingTop:"16px",borderTop:`1px solid ${n==="dark"?"#374151":"#e5e7eb"}`},children:[jsxRuntime.jsx("h4",{style:{...l.sectionTitle,fontSize:"13px"},children:"Keyboard Shortcuts"}),jsxRuntime.jsx("div",{style:{fontSize:"12px",background:n==="dark"?"#1f2937":"#f1f5f9",padding:"8px",borderRadius:"4px",marginTop:"8px"},children:jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("strong",{children:"Alt + Shift + D"}),": Toggle DevTools"]})})]}),jsxRuntime.jsxs("div",{style:{marginTop:"8px",paddingTop:"16px",borderTop:`1px solid ${n==="dark"?"#374151":"#e5e7eb"}`},children:[jsxRuntime.jsx("h4",{style:{...l.sectionTitle,fontSize:"13px"},children:"Plugin Info"}),g.length===0?jsxRuntime.jsx("div",{style:{fontSize:"12px",color:n==="dark"?"#9ca3af":"#64748b"},children:"No plugins registered"}):jsxRuntime.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:g.map(s=>jsxRuntime.jsxs("div",{style:{fontSize:"12px",background:n==="dark"?"#1f2937":"#f1f5f9",padding:"8px",borderRadius:"4px"},children:[jsxRuntime.jsx("div",{style:{fontWeight:500},children:s.name}),jsxRuntime.jsx("div",{style:{color:n==="dark"?"#9ca3af":"#64748b"},children:s.description})]},s.name))})]})]})]})]})]})]})]})};var{createContext:ct,useContext:pt,useEffect:ut,useState:gt}=I__namespace,F=ct({visible:false,setVisible:()=>{},toggle:()=>{}}),M={enabled:process.env.NODE_ENV!=="production",defaultVisible:false,shortcut:"alt+shift+d",showButton:true,buttonPosition:"bottom-right"};function ft(r){M={...M,...r};}function mt(){let r=pt(F);return {visible:r.visible,setVisible:r.setVisible,toggle:r.toggle}}var W=({visible:r=false})=>r?jsxRuntime.jsx(O,{}):null;function $({children:r,config:t}){let o={...M,...t},{enabled:i,defaultVisible:d,shortcut:f}=o,[a,v]=gt(d||false);if(ut(()=>{if(!i)return;let u=m=>{if(f==="alt+shift+d"&&m.altKey&&m.shiftKey&&m.key.toLowerCase()==="d")v(p=>!p);else if(f){let p=f.toLowerCase().split("+"),g={alt:p.includes("alt"),shift:p.includes("shift"),ctrl:p.includes("ctrl")||p.includes("control"),meta:p.includes("meta")||p.includes("command")||p.includes("cmd")},h=p.filter(k=>!["alt","shift","ctrl","control","meta","command","cmd"].includes(k))[0];(!g.alt||m.altKey)&&(!g.shift||m.shiftKey)&&(!g.ctrl||m.ctrlKey)&&(!g.meta||m.metaKey)&&h===m.key.toLowerCase()&&v(k=>!k);}};return window.addEventListener("keydown",u),()=>window.removeEventListener("keydown",u)},[i,f]),!i)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:r});let n=()=>v(u=>!u);return jsxRuntime.jsxs(F.Provider,{value:{visible:a,setVisible:v,toggle:n},children:[r,jsxRuntime.jsx(W,{visible:a})]})} exports.ClientDevTools=W;exports.DevToolsWrapper=$;exports.ToastDevTools=O;exports.configureDevTools=ft;exports.toastDevTools=rt;exports.useDevToolsVisible=mt;//# sourceMappingURL=devtools-entry.cjs.map //# sourceMappingURL=devtools-entry.cjs.map