ivt/dist/toast/index.mjs

Ivt Components Library

import{c as e}from"../chunks/utils-B4HRExF_.mjs";import*as t from"react";import r from"react";import*as o from"react-dom";import{u as n,P as s,c as a}from"../chunks/index-BgU_7G37.mjs";import{createCollection as i}from"@radix-ui/react-collection";import{c}from"../chunks/index-BXKQJZ6z.mjs";import{B as d,R as u,P as l}from"../chunks/index-DX37fts-.mjs";import{P as p,d as m}from"../chunks/index-Bj6b6xW8.mjs";import{u as f}from"../chunks/index-DwSoQWco.mjs";import{u as v}from"../chunks/index-CJw5YZXp.mjs";import{u as w}from"../chunks/index-C99OdH8-.mjs";import{V as h}from"../chunks/index-w5meZsTe.mjs";import{jsx as x,jsxs as y,Fragment as g}from"react/jsx-runtime";import{cva as E}from"class-variance-authority";import{X as T}from"../chunks/x-rWMGj99P.mjs";import"../chunks/bundle-mjs-DdsKEIOo.mjs";import"@radix-ui/react-slot";import"../chunks/createLucideIcon-BSkMD9sy.mjs";var b="ToastProvider",[C,P,R]=i("Toast"),[N,k]=c("Toast",[R]),[D,L]=N(b),S=e=>{const{__scopeToast:r,label:o="Notification",duration:n=5e3,swipeDirection:s="right",swipeThreshold:a=50,children:i}=e,[c,d]=t.useState(null),[u,l]=t.useState(0),p=t.useRef(!1),m=t.useRef(!1);return o.trim(),x(C.Provider,{scope:r,children:x(D,{scope:r,label:o,duration:n,swipeDirection:s,swipeThreshold:a,toastCount:u,viewport:c,onViewportChange:d,onToastAdd:t.useCallback((()=>l((e=>e+1))),[]),onToastRemove:t.useCallback((()=>l((e=>e-1))),[]),isFocusedToastEscapeKeyDownRef:p,isClosePausedRef:m,children:i})})};S.displayName=b;var _="ToastViewport",F=["F8"],j="toast.viewportPause",A="toast.viewportResume",I=t.forwardRef(((e,r)=>{const{__scopeToast:o,hotkey:s=F,label:a="Notifications ({hotkey})",...i}=e,c=L(_,o),u=P(o),l=t.useRef(null),m=t.useRef(null),f=t.useRef(null),v=t.useRef(null),w=n(r,v,c.onViewportChange),h=s.join("+").replace(/Key/g,"").replace(/Digit/g,""),g=c.toastCount>0;t.useEffect((()=>{const e=e=>{0!==s.length&&s.every((t=>e[t]||e.code===t))&&v.current?.focus()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)}),[s]),t.useEffect((()=>{const e=l.current,t=v.current;if(g&&e&&t){const r=()=>{if(!c.isClosePausedRef.current){const e=new CustomEvent(j);t.dispatchEvent(e),c.isClosePausedRef.current=!0}},o=()=>{if(c.isClosePausedRef.current){const e=new CustomEvent(A);t.dispatchEvent(e),c.isClosePausedRef.current=!1}},n=t=>{!e.contains(t.relatedTarget)&&o()},s=()=>{e.contains(document.activeElement)||o()};return e.addEventListener("focusin",r),e.addEventListener("focusout",n),e.addEventListener("pointermove",r),e.addEventListener("pointerleave",s),window.addEventListener("blur",r),window.addEventListener("focus",o),()=>{e.removeEventListener("focusin",r),e.removeEventListener("focusout",n),e.removeEventListener("pointermove",r),e.removeEventListener("pointerleave",s),window.removeEventListener("blur",r),window.removeEventListener("focus",o)}}}),[g,c.isClosePausedRef]);const E=t.useCallback((({tabbingDirection:e})=>{const t=u().map((t=>{const r=t.ref.current,o=[r,...ee(r)];return"forwards"===e?o:o.reverse()}));return("forwards"===e?t.reverse():t).flat()}),[u]);return t.useEffect((()=>{const e=v.current;if(e){const t=t=>{const r=t.altKey||t.ctrlKey||t.metaKey;if("Tab"===t.key&&!r){const r=document.activeElement,o=t.shiftKey;if(t.target===e&&o)return void m.current?.focus();const n=E({tabbingDirection:o?"backwards":"forwards"}),s=n.findIndex((e=>e===r));te(n.slice(s+1))?t.preventDefault():o?m.current?.focus():f.current?.focus()}};return e.addEventListener("keydown",t),()=>e.removeEventListener("keydown",t)}}),[u,E]),y(d,{ref:l,role:"region","aria-label":a.replace("{hotkey}",h),tabIndex:-1,style:{pointerEvents:g?void 0:"none"},children:[g&&x(K,{ref:m,onFocusFromOutsideViewport:()=>{te(E({tabbingDirection:"forwards"}))}}),x(C.Slot,{scope:o,children:x(p.ol,{tabIndex:-1,...i,ref:w})}),g&&x(K,{ref:f,onFocusFromOutsideViewport:()=>{te(E({tabbingDirection:"backwards"}))}})]})}));I.displayName=_;var M="ToastFocusProxy",K=t.forwardRef(((e,t)=>{const{__scopeToast:r,onFocusFromOutsideViewport:o,...n}=e,s=L(M,r);return x(h,{"aria-hidden":!0,tabIndex:0,...n,ref:t,style:{position:"fixed"},onFocus:e=>{const t=e.relatedTarget;!s.viewport?.contains(t)&&o()}})}));K.displayName=M;var O="Toast",V=t.forwardRef(((e,t)=>{const{forceMount:r,open:o,defaultOpen:n,onOpenChange:i,...c}=e,[d,u]=v({prop:o,defaultProp:n??!0,onChange:i,caller:O});return x(s,{present:r||d,children:x(X,{open:d,...c,ref:t,onClose:()=>u(!1),onPause:f(e.onPause),onResume:f(e.onResume),onSwipeStart:a(e.onSwipeStart,(e=>{e.currentTarget.setAttribute("data-swipe","start")})),onSwipeMove:a(e.onSwipeMove,(e=>{const{x:t,y:r}=e.detail.delta;e.currentTarget.setAttribute("data-swipe","move"),e.currentTarget.style.setProperty("--radix-toast-swipe-move-x",`${t}px`),e.currentTarget.style.setProperty("--radix-toast-swipe-move-y",`${r}px`)})),onSwipeCancel:a(e.onSwipeCancel,(e=>{e.currentTarget.setAttribute("data-swipe","cancel"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"),e.currentTarget.style.removeProperty("--radix-toast-swipe-end-x"),e.currentTarget.style.removeProperty("--radix-toast-swipe-end-y")})),onSwipeEnd:a(e.onSwipeEnd,(e=>{const{x:t,y:r}=e.detail.delta;e.currentTarget.setAttribute("data-swipe","end"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"),e.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"),e.currentTarget.style.setProperty("--radix-toast-swipe-end-x",`${t}px`),e.currentTarget.style.setProperty("--radix-toast-swipe-end-y",`${r}px`),u(!1)}))})})}));V.displayName=O;var[$,U]=N(O,{onClose(){}}),X=t.forwardRef(((e,r)=>{const{__scopeToast:s,type:i="foreground",duration:c,open:d,onClose:l,onEscapeKeyDown:m,onPause:v,onResume:w,onSwipeStart:h,onSwipeMove:E,onSwipeCancel:T,onSwipeEnd:b,...P}=e,R=L(O,s),[N,k]=t.useState(null),D=n(r,(e=>k(e))),S=t.useRef(null),_=t.useRef(null),F=c||R.duration,I=t.useRef(0),M=t.useRef(F),K=t.useRef(0),{onToastAdd:V,onToastRemove:U}=R,X=f((()=>{const e=N?.contains(document.activeElement);e&&R.viewport?.focus(),l()})),B=t.useCallback((e=>{e&&e!==1/0&&(window.clearTimeout(K.current),I.current=(new Date).getTime(),K.current=window.setTimeout(X,e))}),[X]);t.useEffect((()=>{const e=R.viewport;if(e){const t=()=>{B(M.current),w?.()},r=()=>{const e=(new Date).getTime()-I.current;M.current=M.current-e,window.clearTimeout(K.current),v?.()};return e.addEventListener(j,r),e.addEventListener(A,t),()=>{e.removeEventListener(j,r),e.removeEventListener(A,t)}}}),[R.viewport,F,v,w,B]),t.useEffect((()=>{d&&!R.isClosePausedRef.current&&B(F)}),[d,F,R.isClosePausedRef,B]),t.useEffect((()=>(V(),()=>U())),[V,U]);const H=t.useMemo((()=>N?J(N):null),[N]);return R.viewport?y(g,{children:[H&&x(q,{__scopeToast:s,role:"status","aria-live":"foreground"===i?"assertive":"polite","aria-atomic":!0,children:H}),x($,{scope:s,onClose:X,children:o.createPortal(x(C.ItemSlot,{scope:s,children:x(u,{asChild:!0,onEscapeKeyDown:a(m,(()=>{R.isFocusedToastEscapeKeyDownRef.current||X(),R.isFocusedToastEscapeKeyDownRef.current=!1})),children:x(p.li,{role:"status","aria-live":"off","aria-atomic":!0,tabIndex:0,"data-state":d?"open":"closed","data-swipe-direction":R.swipeDirection,...P,ref:D,style:{userSelect:"none",touchAction:"none",...e.style},onKeyDown:a(e.onKeyDown,(e=>{"Escape"===e.key&&(m?.(e.nativeEvent),e.nativeEvent.defaultPrevented||(R.isFocusedToastEscapeKeyDownRef.current=!0,X()))})),onPointerDown:a(e.onPointerDown,(e=>{0===e.button&&(S.current={x:e.clientX,y:e.clientY})})),onPointerMove:a(e.onPointerMove,(e=>{if(!S.current)return;const t=e.clientX-S.current.x,r=e.clientY-S.current.y,o=Boolean(_.current),n=["left","right"].includes(R.swipeDirection),s=["left","up"].includes(R.swipeDirection)?Math.min:Math.max,a=n?s(0,t):0,i=n?0:s(0,r),c="touch"===e.pointerType?10:2,d={x:a,y:i},u={originalEvent:e,delta:d};o?(_.current=d,Q("toast.swipeMove",E,u,{discrete:!1})):Z(d,R.swipeDirection,c)?(_.current=d,Q("toast.swipeStart",h,u,{discrete:!1}),e.target.setPointerCapture(e.pointerId)):(Math.abs(t)>c||Math.abs(r)>c)&&(S.current=null)})),onPointerUp:a(e.onPointerUp,(e=>{const t=_.current,r=e.target;if(r.hasPointerCapture(e.pointerId)&&r.releasePointerCapture(e.pointerId),_.current=null,S.current=null,t){const r=e.currentTarget,o={originalEvent:e,delta:t};Z(t,R.swipeDirection,R.swipeThreshold)?Q("toast.swipeEnd",b,o,{discrete:!0}):Q("toast.swipeCancel",T,o,{discrete:!0}),r.addEventListener("click",(e=>e.preventDefault()),{once:!0})}}))})})}),R.viewport)})]}):null})),q=e=>{const{__scopeToast:r,children:o,...n}=e,s=L(O,r),[a,i]=t.useState(!1),[c,d]=t.useState(!1);return function(e=()=>{}){const t=f(e);w((()=>{let e=0,r=0;return e=window.requestAnimationFrame((()=>r=window.requestAnimationFrame(t))),()=>{window.cancelAnimationFrame(e),window.cancelAnimationFrame(r)}}),[t])}((()=>i(!0))),t.useEffect((()=>{const e=window.setTimeout((()=>d(!0)),1e3);return()=>window.clearTimeout(e)}),[]),c?null:x(l,{asChild:!0,children:x(h,{...n,children:a&&y(g,{children:[s.label," ",o]})})})},B=t.forwardRef(((e,t)=>{const{__scopeToast:r,...o}=e;return x(p.div,{...o,ref:t})}));B.displayName="ToastTitle";var H=t.forwardRef(((e,t)=>{const{__scopeToast:r,...o}=e;return x(p.div,{...o,ref:t})}));H.displayName="ToastDescription";var W=t.forwardRef(((e,t)=>{const{altText:r,...o}=e;return r.trim()?x(G,{altText:r,asChild:!0,children:x(z,{...o,ref:t})}):null}));W.displayName="ToastAction";var Y="ToastClose",z=t.forwardRef(((e,t)=>{const{__scopeToast:r,...o}=e,n=U(Y,r);return x(G,{asChild:!0,children:x(p.button,{type:"button",...o,ref:t,onClick:a(e.onClick,n.onClose)})})}));z.displayName=Y;var G=t.forwardRef(((e,t)=>{const{__scopeToast:r,altText:o,...n}=e;return x(p.div,{"data-radix-toast-announce-exclude":"","data-radix-toast-announce-alt":o||void 0,...n,ref:t})}));function J(e){const t=[];return Array.from(e.childNodes).forEach((e=>{if(e.nodeType===e.TEXT_NODE&&e.textContent&&t.push(e.textContent),function(e){return e.nodeType===e.ELEMENT_NODE}(e)){const r=e.ariaHidden||e.hidden||"none"===e.style.display,o=""===e.dataset.radixToastAnnounceExclude;if(!r)if(o){const r=e.dataset.radixToastAnnounceAlt;r&&t.push(r)}else t.push(...J(e))}})),t}function Q(e,t,r,{discrete:o}){const n=r.originalEvent.currentTarget,s=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r});t&&n.addEventListener(e,t,{once:!0}),o?m(n,s):n.dispatchEvent(s)}var Z=(e,t,r=0)=>{const o=Math.abs(e.x),n=Math.abs(e.y),s=o>n;return"left"===t||"right"===t?s&&o>r:!s&&n>r};function ee(e){const t=[],r=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>{const t="INPUT"===e.tagName&&"hidden"===e.type;return e.disabled||e.hidden||t?NodeFilter.FILTER_SKIP:e.tabIndex>=0?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}});for(;r.nextNode();)t.push(r.currentNode);return t}function te(e){const t=document.activeElement;return e.some((e=>e===t||(e.focus(),document.activeElement!==t)))}var re=I,oe=V,ne=B,se=H,ae=W,ie=z;const ce=S,de=({className:t,...o})=>r.createElement(re,{"data-slot":"toast-viewport",className:e("fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]",t),...o}),ue=E("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",{variants:{variant:{default:"border bg-background text-foreground",destructive:"destructive group border-destructive-foreground bg-destructive-foreground text-destructive border-destructive"}},defaultVariants:{variant:"default"}}),le=({className:t,variant:o,...n})=>r.createElement(oe,{"data-slot":"toast-root",className:e(ue({variant:o}),t),...n}),pe=({className:t,...o})=>r.createElement(ae,{"data-slot":"toast-action",className:e("ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none disabled:opacity-50",t),...o}),me=({className:t,...o})=>r.createElement(ie,{"data-slot":"toast-close",className:e("text-foreground/50 hover:text-foreground absolute top-2 right-2 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:ring-2 focus:outline-none group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",t),"toast-close":"",...o},r.createElement(T,{className:"h-4 w-4"})),fe=({className:t,...o})=>r.createElement(ne,{"data-slot":"toast-title",className:e("text-sm font-semibold",t),...o}),ve=({className:t,...o})=>r.createElement(se,{"data-slot":"toast-description",className:e("text-sm opacity-90",t),...o});export{le as Toast,pe as ToastAction,me as ToastClose,ve as ToastDescription,ce as ToastProvider,fe as ToastTitle,de as ToastViewport};
//# sourceMappingURL=index.mjs.map