@kitn.ai/ui/dist/elements/toast.js

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import{g as z,j as Q,h as G,p as H,c as a,i as h,F as U,u as V,a as L,d as C,b as E,z as J,G as Z,S as b,t as $,l as _,e as ie,f as ae}from"./chunks/define-CNSKFZCd.js";import{c as g}from"./chunks/cn-CU7UAWzk.js";import{c as se}from"./chunks/overlay-B1-MBI6h.js";import{r as ee,t as de}from"./chunks/toast-store-BEMda0fv.js";import{c as le}from"./chunks/check-fhmRksq_.js";import{c as ce}from"./chunks/circle-x-pDtzlghQ.js";import{i as ue}from"./chunks/info-DBQl-m6e.js";import{t as me}from"./chunks/triangle-alert-B07fX3Q8.js";import{x as pe}from"./chunks/x-Ckwicf6g.js";var ve=$("<button type=button>"),fe=$("<button type=button aria-label=Dismiss>"),te=$("<div>"),ge=$('<div class="min-w-0 flex-1"><div class="font-medium leading-snug">'),he=$("<div role=status>"),xe=$('<span class="min-w-0 flex-1 truncate">'),be=$('<div role=region aria-label=Notifications aria-live=polite data-stack=collapsed><div class="pointer-events-auto relative transition-[height] duration-200 ease-out"style="min-width:16rem;max-width:min(30rem, calc(100vw - 2rem))">'),we=$("<div role=region aria-label=Notifications aria-live=polite data-stack=expanded>");function ke(){var t,c;const[u,f]=z(typeof window<"u"&&((t=window.matchMedia)==null?void 0:t.call(window,"(prefers-reduced-motion: reduce)").matches)===!0);if(typeof window<"u"&&window.matchMedia){const m=window.matchMedia("(prefers-reduced-motion: reduce)"),l=()=>f(m.matches);(c=m.addEventListener)==null||c.call(m,"change",l),H(()=>{var d;return(d=m.removeEventListener)==null?void 0:d.call(m,"change",l)})}return u}function re(t){const[c,u]=z(!0),f=se(c),m=()=>t.item.variant??"neutral",l=()=>t.item.dismissible!==!1,d=()=>t.item.appearance??t.appearance??"pill",v=()=>t.item.inverse??t.inverse??!1,I=()=>v()?"bg-foreground text-background border-transparent":"bg-popover text-popover-foreground border-border",W=()=>v()?"text-background/70":"text-muted-foreground",D=()=>v()?"text-background hover:text-background/80":"text-primary hover:text-primary/80",Y=()=>v()?"text-background/70 hover:text-background":"text-muted-foreground hover:text-foreground";let A=ee(t.item),S=0,k,y="timeout";const w=()=>{k!==void 0&&(clearTimeout(k),k=void 0)},R=()=>{w(),!(A<=0)&&(S=Date.now(),k=setTimeout(()=>{y="timeout",u(!1)},A))},B=()=>{k!==void 0&&(w(),A-=Date.now()-S)},[P,T]=z(!1),X=()=>t.paused===!0||P();G(_(()=>ee(t.item),e=>{A=e,X()?w():R()})),G(_(X,e=>{e?B():R()},{defer:!0})),H(w),G(()=>{!f.present()&&!c()&&t.onDismiss(y)});const q=()=>{w(),y="close",u(!1)},j=()=>{var e;const n=t.item.action;n&&((e=t.onAction)==null||e.call(t,n.label),n.onAction()===!1||(w(),y="action",u(!1)))},x=()=>d()==="card"?"mt-0.5":void 0,F=()=>[a(b,{get when(){return m()==="success"},get children(){return a(le,{get class(){return g("size-4 shrink-0 text-emerald-500",x())}})}}),a(b,{get when(){return m()==="warning"},get children(){return a(me,{get class(){return g("size-4 shrink-0 text-warning",x())}})}}),a(b,{get when(){return m()==="error"},get children(){return a(ce,{get class(){return g("size-4 shrink-0 text-destructive",x())}})}}),a(b,{get when(){return m()==="info"},get children(){return a(ue,{get class(){return g("size-4 shrink-0 text-info",x())}})}})],r=e=>a(b,{get when(){return t.item.action},children:n=>(()=>{var o=ve();return o.$$click=j,h(o,()=>n().label),L(()=>E(o,g(d()==="card"?g("inline-flex shrink-0 items-center rounded-md border px-2.5 py-1 text-xs font-medium transition-colors",v()?"border-background/30 text-background hover:bg-background/10":"border-border text-foreground hover:bg-accent"):g("shrink-0 rounded-md text-sm font-medium underline-offset-2 hover:underline",D()),e.class))),o})()}),i=()=>a(b,{get when(){return l()},get children(){var e=fe();return e.$$click=q,h(e,a(pe,{class:"size-3.5"})),L(()=>E(e,g("-mr-1 flex size-5 shrink-0 items-center justify-center rounded-md transition-colors",Y()))),e}});return a(b,{get when(){return f.present()},get children(){var e=he();e.addEventListener("pointerleave",()=>T(!1)),e.addEventListener("pointerenter",()=>T(!0));var n=f.setRef;return typeof n=="function"?V(n,e):f.setRef=e,h(e,a(F,{}),null),h(e,a(b,{get when(){return d()==="card"},get fallback(){return[(()=>{var o=xe();return h(o,()=>t.item.message),o})(),a(r,{}),a(i,{})]},get children(){return[(()=>{var o=ge(),s=o.firstChild;return h(s,()=>t.item.message),h(o,a(b,{get when(){return t.item.description},get children(){var p=te();return h(p,()=>t.item.description),L(()=>E(p,g("mt-1 line-clamp-2 text-xs leading-snug",W()))),p}}),null),h(o,a(r,{class:"mt-2"}),null),o})(),a(i,{})]}}),null),L(o=>{var s=d(),p=v()?"":void 0,M=f.state()==="closed"?"":void 0,N=g("pointer-events-auto border text-sm shadow-lg",I(),"animate-in fade-in-0 slide-in-from-top-4","data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:slide-out-to-top-2",d()==="card"?"flex min-w-[24rem] items-start gap-3 rounded-xl p-4 shadow-xl":"flex items-center gap-3 rounded-full px-4 py-2.5");return s!==o.e&&C(e,"data-appearance",o.e=s),p!==o.t&&C(e,"data-inverse",o.t=p),M!==o.a&&C(e,"data-closed",o.a=M),N!==o.o&&E(e,o.o=N),o},{e:void 0,t:void 0,a:void 0,o:void 0}),e}})}const ne={"top-center":"top-4 left-1/2 -translate-x-1/2 items-center","top-right":"top-4 right-4 items-end","top-left":"top-4 left-4 items-start","bottom-center":"bottom-4 left-1/2 -translate-x-1/2 items-center flex-col-reverse","bottom-right":"bottom-4 right-4 items-end flex-col-reverse","bottom-left":"bottom-4 left-4 items-start flex-col-reverse"},$e={"top-center":"items-center","top-left":"items-start","top-right":"items-end","bottom-center":"items-center flex-col-reverse","bottom-left":"items-start flex-col-reverse","bottom-right":"items-end flex-col-reverse"},O=12;function oe(t,c){const u=c.left+c.width/2,f=c.top+O,m=c.bottom-O,l=c.left+O,d=c.right-O,v=`${Math.max(0,c.width-O*2)}px`;switch(t){case"top-left":return{top:`${f}px`,left:`${l}px`,transform:"none","max-width":v};case"top-right":return{top:`${f}px`,left:`${d}px`,transform:"translateX(-100%)","max-width":v};case"bottom-center":return{top:`${m}px`,left:`${u}px`,transform:"translate(-50%, -100%)","max-width":v};case"bottom-left":return{top:`${m}px`,left:`${l}px`,transform:"translateY(-100%)","max-width":v};case"bottom-right":return{top:`${m}px`,left:`${d}px`,transform:"translate(-100%, -100%)","max-width":v};default:return{top:`${f}px`,left:`${u}px`,transform:"translateX(-50%)","max-width":v}}}function ye(t){const c=()=>t.max??3,u=()=>t.position??"top-center",f=()=>t.stack??"expanded",m=ke(),l=()=>f()==="collapsed"&&!m(),[d,v]=z(!1),[I,W]=z(!1),D=()=>d()||I(),Y=20,A=.05,S=48,k=8,y=()=>u().startsWith("bottom"),w=()=>y()?-1:1,[R,B]=z(S),P=r=>{if(!r||typeof window>"u")return;const i=()=>{const n=r.offsetHeight;n&&B(n)};if(i(),typeof ResizeObserver>"u")return;const e=new ResizeObserver(i);e.observe(r),H(()=>e.disconnect())},T=r=>D()?`translateY(${w()*(R()+k)*r}px) scale(1)`:`translateY(${w()*Y*r}px) scale(${1-A*r})`,X=()=>{const r=j().length;return r?D()?r*R()+(r-1)*k:R()+(r-1)*Y:0},q=Q(()=>[...(t.toasts??[]).filter(r=>(r.target??void 0)===t.target)].reverse()),j=Q(()=>q().slice(0,c())),[x,F]=z(null);return G(()=>{const r=t.target;if(!r||typeof window>"u"){F(null);return}const i=()=>{const n=r.getBoundingClientRect();F({top:n.top,left:n.left,right:n.right,bottom:n.bottom,width:n.width})};i();const e=new ResizeObserver(i);e.observe(r),window.addEventListener("scroll",i,!0),window.addEventListener("resize",i),H(()=>{e.disconnect(),window.removeEventListener("scroll",i,!0),window.removeEventListener("resize",i)})}),a(b,{get when(){return l()},get fallback(){return(()=>{var r=we();return h(r,a(U,{get each(){return j()},children:i=>a(re,{item:i,get appearance(){return t.appearance},get inverse(){return t.inverse},onDismiss:e=>{var n;return(n=t.onDismiss)==null?void 0:n.call(t,i.id,e)},onAction:e=>{var n;return(n=t.onAction)==null?void 0:n.call(t,i.id,e)}})})),L(i=>{var e=g("pointer-events-none fixed z-[100] flex flex-col gap-2",x()?$e[u()]:g("max-w-[min(30rem,calc(100vw-2rem))]",ne[u()])),n=x()?oe(u(),x()):void 0;return e!==i.e&&E(r,i.e=e),i.t=Z(r,n,i.t),i},{e:void 0,t:void 0}),r})()},get children(){var r=be(),i=r.firstChild;return r.$$focusout=()=>W(!1),r.$$focusin=()=>W(!0),r.addEventListener("pointerleave",()=>v(!1)),r.addEventListener("pointerenter",()=>v(!0)),h(i,a(U,{get each(){return j()},children:(e,n)=>(()=>{var o=te();return V(s=>{n()===0&&P(s)},o),h(o,a(re,{item:e,get paused(){return D()},get appearance(){return t.appearance},get inverse(){return t.inverse},onDismiss:s=>{var p;return(p=t.onDismiss)==null?void 0:p.call(t,e.id,s)},onAction:s=>{var p;return(p=t.onAction)==null?void 0:p.call(t,e.id,s)}})),L(s=>{var p=n(),M=g("absolute inset-x-0 flex transition-[transform,opacity] duration-200 ease-out",y()?"bottom-0 origin-bottom":"top-0 origin-top",u().endsWith("right")?"justify-end":u().endsWith("left")?"justify-start":"justify-center"),N=String(c()-n()),K=T(n());return p!==s.e&&C(o,"data-depth",s.e=p),M!==s.t&&E(o,s.t=M),N!==s.a&&J(o,"z-index",s.a=N),K!==s.o&&J(o,"transform",s.o=K),s},{e:void 0,t:void 0,a:void 0,o:void 0}),o})()})),L(e=>{var n=D()?"":void 0,o=g("pointer-events-none fixed z-[100]",!x()&&ne[u()]),s=x()?oe(u(),x()):void 0,p=`${X()}px`;return n!==e.e&&C(r,"data-expanded",e.e=n),o!==e.t&&E(r,e.t=o),e.a=Z(r,s,e.a),p!==e.o&&J(i,"height",e.o=p),e},{e:void 0,t:void 0,a:void 0,o:void 0}),r}})}ie(["click","focusin","focusout"]),ae("kai-toast-region",{toasts:[],position:"top-center",max:3,stack:"expanded",appearance:"pill",inverse:!1,target:void 0},(t,{dispatch:c,flag:u})=>{const f=()=>{const l=t.max,d=typeof l=="string"?parseInt(l,10):l;return typeof d=="number"&&!Number.isNaN(d)?d:3},m=l=>{de.dismiss(l)};return a(ye,{get toasts(){return t.toasts??[]},get position(){return t.position},get max(){return f()},get stack(){return t.stack},get appearance(){return t.appearance},get inverse(){return u("inverse")},get target(){return t.target},onDismiss:(l,d)=>{m(l),c("kai-dismiss",{id:l,reason:d})},onAction:(l,d)=>c("kai-action",{id:l,label:d})})});