ivt/dist/toast/index.mjs

Ivt Components Library

import{c as e}from"../chunks/utils-C-nkZ_Ir.mjs";import*as t from"react";import r from"react";import*as o from"react-dom";import{c as n}from"../chunks/index-DVnblQ-a.mjs";import{u as s}from"../chunks/index-C-j8pU3U.mjs";import{createCollection as a}from"@radix-ui/react-collection";import{c as i}from"../chunks/index-Dr5ObK3L.mjs";import{B as c,R as d,P as u}from"../chunks/index-C_Mk3Jfk.mjs";import{P as l}from"../chunks/index-1xuBLrml.mjs";import{P as p,d as m}from"../chunks/index-DiPp8h7C.mjs";import{u as f}from"../chunks/index-DSUHCtxx.mjs";import{u as v}from"../chunks/index-BOUg6o32.mjs";import{u as w}from"../chunks/index-0-u0cdz8.mjs";import{V as h}from"../chunks/index-CKqioLrK.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-COocN1ks.mjs";import"../chunks/bundle-mjs-DHbvkKp4.mjs";import"@radix-ui/react-slot";import"../chunks/createLucideIcon-D1jKv6AP.mjs";var b="ToastProvider",[C,P,R]=a("Toast"),[N,k]=i("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:n=F,label:a="Notifications ({hotkey})",...i}=e,d=L(_,o),u=P(o),l=t.useRef(null),m=t.useRef(null),f=t.useRef(null),v=t.useRef(null),w=s(r,v,d.onViewportChange),h=n.join("+").replace(/Key/g,"").replace(/Digit/g,""),g=d.toastCount>0;t.useEffect(()=>{const e=e=>{0!==n.length&&n.every(t=>e[t]||e.code===t)&&v.current?.focus()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[n]),t.useEffect(()=>{const e=l.current,t=v.current;if(g&&e&&t){const r=()=>{if(!d.isClosePausedRef.current){const e=new CustomEvent(j);t.dispatchEvent(e),d.isClosePausedRef.current=!0}},o=()=>{if(d.isClosePausedRef.current){const e=new CustomEvent(A);t.dispatchEvent(e),d.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,d.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(c,{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:s,onOpenChange:a,...i}=e,[c,d]=v({prop:o,defaultProp:s??!0,onChange:a,caller:O});return x(l,{present:r||c,children:x(X,{open:c,...i,ref:t,onClose:()=>d(!1),onPause:f(e.onPause),onResume:f(e.onResume),onSwipeStart:n(e.onSwipeStart,e=>{e.currentTarget.setAttribute("data-swipe","start")}),onSwipeMove:n(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:n(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:n(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`),d(!1)})})})});V.displayName=O;var[$,U]=N(O,{onClose(){}}),X=t.forwardRef((e,r)=>{const{__scopeToast:a,type:i="foreground",duration:c,open:u,onClose:l,onEscapeKeyDown:m,onPause:v,onResume:w,onSwipeStart:h,onSwipeMove:E,onSwipeCancel:T,onSwipeEnd:b,...P}=e,R=L(O,a),[N,k]=t.useState(null),D=s(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(()=>{u&&!R.isClosePausedRef.current&&B(F)},[u,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:a,role:"status","aria-live":"foreground"===i?"assertive":"polite","aria-atomic":!0,children:H}),x($,{scope:a,onClose:X,children:o.createPortal(x(C.ItemSlot,{scope:a,children:x(d,{asChild:!0,onEscapeKeyDown:n(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":u?"open":"closed","data-swipe-direction":R.swipeDirection,...P,ref:D,style:{userSelect:"none",touchAction:"none",...e.style},onKeyDown:n(e.onKeyDown,e=>{"Escape"===e.key&&(m?.(e.nativeEvent),e.nativeEvent.defaultPrevented||(R.isFocusedToastEscapeKeyDownRef.current=!0,X()))}),onPointerDown:n(e.onPointerDown,e=>{0===e.button&&(S.current={x:e.clientX,y:e.clientY})}),onPointerMove:n(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:n(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(u,{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,s=U(Y,r);return x(G,{asChild:!0,children:x(p.button,{type:"button",...o,ref:t,onClick:n(e.onClick,s.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