@gajendra-naphade/react-web-guide/dist/index.umd.cjs

React Web Guide: A customizable, interactive tour component for React apps.

(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.ReactWebGuide={},f.jsxRuntime,f.React))})(this,function(f,e,n){"use strict";const K=({x:t,CursorMessageGap:i,y:s,isOffScreen:d,Theme:w,name:m="Guide",color:b="#ff6b6b",message:v,isVisible:y=!0,onClick:B,showNext:j=!1,cursorImage:S=null,messageBoxStyle:D={},cursorStyle:$={},nextButtonText:C,nextButtonContinueText:L,nextButtonClassName:P,nextButtonStyle:O={},messageClass:T,CustomCursorClass:A=""})=>{const[c,V]=n.useState({left:!1,top:!1}),[p,z]=n.useState(!1);if(n.useEffect(()=>{const X=window.innerWidth-t-24,l=t-24,H=window.innerHeight-s-24,a=s-24,N=X<192&&l>192,F=H<100&&a>100;V({left:N,top:F})},[t,s]),!y)return null;const G=[`${T} ${w=="Light"?"bg-[#ffffff2d] text-gray-900":"bg-[#0a0b1b] text-white"}  z-[999999999999999999999999999999] absolute px-2 md:!px-3 py-2 rounded-lg text-[10px] md:!text-xs font-medium  2xl:!text-sm  backdrop-blur-md shadow-lg border-[0.2px] w-24 md:!w-48`,c.left?"right-14":"left-8",c.top&&!c.left?"bottom-2 left-6":"top-6","transition-all duration-500 ease-in-out"].join(" "),I=x=>{x.stopPropagation(),z(!0)},q=x=>{x.stopPropagation(),z(!1)};return e.jsx("div",{className:"fixed react-web-guide pointer-events-none z-[999999999999999999999999999999]",style:{left:p?`${window.innerWidth-60}px`:`${t}px`,top:p?"50%":`${s}px`,transition:"all 0.5s ease-out",...$},children:e.jsxs("div",{className:"relative z-[999999999999999999999999999999999]",children:[S?e.jsx("img",{src:S,alt:"Custom cursor",className:` ${A} w-6 h-6 drop-shadow-lg ${c.top?"-translate-y-5":""}  z-[99999999999999999]`,style:{filter:"drop-shadow(0 2px 4px rgba(0,0,0,0.2))"}}):e.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",className:`drop-shadow-lg ${c.top?"-translate-y-5":""} z-[99999999999999999]`,style:{filter:"drop-shadow(0 2px 4px rgba(0,0,0,0.2))"},children:e.jsx("path",{d:"M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z",fill:b,stroke:"white",strokeWidth:"2"})}),e.jsx("div",{className:`absolute ${c.top?"bottom-1 -left-4":"top-6 -left-4"}  px-2 py-[1px] rounded-full text-[10px] max-w-[65px]  truncate text-white font-medium whitespace-nowrap shadow-md`,style:{backgroundColor:b},children:m}),v&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:G,style:{...D,opacity:p?0:1,transform:p?"translateX(100px)":"translateX(0)",marginLeft:c.left?"0":`${i}px`},children:[e.jsx("button",{onClick:I,title:"Pause the tour",className:` ${w==="Light"?"bg-[#ffffff6c]":"bg-[#6b6b6b6c] "} pointer-events-auto absolute -top-6 -right-6 border  backdrop-blur-md rounded-full p-[6px] shadow-md hover:shadow-lg transition-all duration-200 hover:scale-110`,children:e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"red",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-heart-crack","aria-hidden":"true",children:[e.jsx("path",{d:"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"}),e.jsx("path",{d:"m12 13-1-1 2-2-3-3 2-2"})]})}),e.jsx("div",{className:"mb-2",children:v}),j&&!p&&e.jsx("button",{title:d?L:C,onClick:B,className:`${P} ${w==="Light"?"text-white bg-black/90":"bg-white/90 text-black"} !pointer-events-auto !z-[99999999999999999999] backdrop-blur-sm rounded-md border px-3 py-[1px] rounded-full text-[10px] flex items-center justify-center font-medium hover:shadow-lg transition-all duration-200 transform hover:scale-105 active:scale-95`,style:O,children:d?L:C})]}),p&&e.jsx("div",{className:"absolute",style:{left:c.left?"auto":"calc(100% - 0.4rem)",right:c.left?"calc(100% - 3rem)":"auto",top:"50%",transform:"translateY(-50%)"},children:e.jsx("button",{onClick:q,title:"Continue the tour",className:` ${w==="Light"?"bg-[#ffffff6c]":"bg-[#6b6b6b6c] "} pointer-events-auto backdrop-blur-md border rounded-full p-[6px] shadow-md hover:shadow-lg transition-all duration-200 hover:scale-110`,children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"red",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-heart","aria-hidden":"true",children:e.jsx("path",{d:"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"})})})})]})]})})},J=({isVisible:t,onClose:i,theme:s})=>t?e.jsx("div",{className:"react-web-guide absolute w-36 bottom-full mb-2 left-1/2 transform -translate-x-1/2 animate-bounce-subtle z-[99999999999999999]",children:e.jsxs("div",{className:`relative ${s==="Dark"?"bg-black/90 text-white":"bg-white/90 text-black"} px-3  py-2 rounded-lg shadow-lg backdrop-blur-sm tooltip-enter tooltip-enter-active`,children:[e.jsx("button",{onClick:i,className:`absolute -top-2 -right-2 ${s==="Dark"?"bg-black/90 text-white":"bg-white/90 text-black"} backdrop-blur-sm rounded-full p-1 shadow-md hover:shadow-lg transition-all duration-200 hover:scale-110`,children:e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M18 6 6 18"}),e.jsx("path",{d:"m6 6 12 12"})]})}),e.jsx("div",{className:"text-sm font-medium text-center flex items-center gap-2",children:e.jsx("span",{children:"Start your web tour here!"})}),e.jsx("div",{className:`absolute bottom-0 right-2 transform  translate-y-1/2 rotate-45 w-2 h-2 ${s==="Dark"?"bg-black/90":"bg-white/90"}`})]})}):null,Q=t=>{if(!t||t===document.body)return window;const{overflow:i,overflowY:s,overflowX:d,height:w}=window.getComputedStyle(t),m=t.scrollHeight>t.clientHeight||t.scrollWidth>t.clientWidth,b=["auto","scroll"].some(y=>[i,s,d].includes(y)),v=t.classList.contains("h-screen")||w==="100vh"||w==="100%"||t.style.height==="100vh"||t.style.height==="100%";return(b||v)&&m?t:Q(t.parentElement)},U=(t,i=window)=>{if(!t)return!1;const s=t.getBoundingClientRect();if(i===window)return s.top>=-100&&s.bottom<=window.innerHeight+100&&s.left>=-100&&s.right<=window.innerWidth+100;{const d=i.getBoundingClientRect();return s.top>=d.top-100&&s.bottom<=d.bottom+100&&s.left>=d.left-100&&s.right<=d.right+100}},ce=({steps:t=[],Theme:i="Light",onComplete:s,startButtonText:d="Start Tour",skipButtonText:w="Skip Tour",minimizedStartText:m="Start",minimizedSkipText:b="Skip",showProgress:v=!0,Minimized:y=!0,showTooltip:B=!0,buttonPosition:j={bottom:"1.5rem",right:"1.5rem",left:"auto",top:"auto"},expandedButtonClassName:S=` ${i==="Dark"?"text-white bg-black/90":"bg-white/90 text-black"}  border   px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105`,minimizedButtonClassName:D=` ${i==="Dark"?"text-white bg-black/90":"bg-white/90 text-black"}  border  px-2 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105`,buttonStyle:$={},CloseButtonText:C=e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-x","aria-hidden":"true",children:[e.jsx("path",{d:"M18 6 6 18"}),e.jsx("path",{d:"m6 6 12 12"})]}),ExpandButtonText:L=e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-maximize2 lucide-maximize-2","aria-hidden":"true",children:[e.jsx("path",{d:"M15 3h6v6"}),e.jsx("path",{d:"m21 3-7 7"}),e.jsx("path",{d:"m3 21 7-7"}),e.jsx("path",{d:"M9 21H3v-6"})]}),minimizedButtonStyle:P={width:"3rem",height:"3rem",fontSize:"0.875rem"},closeButtonClassName:O=`${i==="Dark"?"text-white bg-black/90":"bg-white/90 text-black"} -translate-y-4 -translate-x-1  rounded-full  p-1 shadow-md hover:shadow-lg transition-all duration-200 hover:scale-110`,expandButtonClassName:T=`${i==="Dark"?"text-white bg-black/90":"bg-white/90 text-black"} -translate-y-4 -translate-x-1  rounded-full  p-1 shadow-md hover:shadow-lg transition-all duration-200 hover:scale-110`,closeButtonStyle:A={},expandButtonStyle:c={},cursorImage:V=null,messageBoxStyle:p={},cursorStyle:z={},nextButtonText:G="Next",nextButtonContinueText:I="Continue",nextButtonClassName:q,nextButtonStyle:x={},messageClass:R,scrollContainer:k=null,CustomCursorClass:X})=>{var ie,ne,ae,de;const[l,H]=n.useState(0),[a,N]=n.useState(!1),[F,ee]=n.useState(y),[te,he]=n.useState({x:0,y:0}),[E,oe]=n.useState(!1),[ue,Y]=n.useState(!0),[se,Z]=n.useState(B),[fe,we]=n.useState(null),M=n.useRef(null);n.useEffect(()=>{var r;if(!a||!((r=t[l])!=null&&r.ref.current))return;let o;if(k)typeof k=="string"?o=document.querySelector(k):o=k;else if(o=Q(t[l].ref.current),o===window){const h=[".scrollDiv",'[class*="h-screen"]','[class*="overflow"]',".scroll-smooth","main","#app","#root"];for(const g of h){const u=document.querySelector(g);if(u&&u.scrollHeight>u.clientHeight){o=u;break}}}we(o),M.current=o},[a,l,k]);const W=()=>{if(!a||l>=t.length)return;const o=t[l];if(o.ref.current){const r=o.ref.current.getBoundingClientRect(),h=r.left+(o.offsetX||r.width/2),g=r.top+(o.offsetY||r.height/2);he({x:h,y:g});const u=M.current||window,xe=U(o.ref.current,u);oe(!xe)}},ge=(o,r)=>{if(o)if(r===window)o.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"});else if(r&&r.scrollTo){const h=r.getBoundingClientRect(),g=o.getBoundingClientRect(),u=r.scrollTop+g.top-h.top-r.clientHeight/2+g.height/2;r.scrollTo({top:u,behavior:"smooth"})}else o.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"})},re=()=>{var o;if(l<t.length-1){const r=(o=t[l+1])==null?void 0:o.ref.current,h=M.current||window;r&&!U(r,h)?(Y(!1),ge(r,h),setTimeout(()=>{oe(!1),Y(!0),_()},800)):_()}else _()};n.useEffect(()=>{if(!a)return;W();const o=M.current,r=()=>W(),h=()=>W(),g=u=>{u.key==="ArrowRight"&&re()};return window.addEventListener("scroll",r,{passive:!0}),window.addEventListener("resize",h),window.addEventListener("keydown",g),o&&o!==window&&o.addEventListener("scroll",r,{passive:!0}),()=>{window.removeEventListener("scroll",r),window.removeEventListener("resize",h),window.removeEventListener("keydown",g),o&&o!==window&&o.removeEventListener("scroll",r)}},[a,l,fe]);const _=()=>{l<t.length-1?H(l+1):(N(!1),s==null||s())},pe=()=>{N(!0),H(0),Y(!0),setTimeout(W,500)},le=()=>{a?(N(!1),s==null||s()):(pe(),Z(!1))},be=o=>{o.stopPropagation(),ee(!0)},ve=o=>{o.stopPropagation(),ee(!1)};return e.jsxs("div",{className:"react-web-guide",children:[e.jsx("div",{className:"fixed z-[999999999999999999999999999999999]",style:j,children:F?e.jsxs("div",{className:"relative",children:[e.jsx(J,{isVisible:se&&!a,onClose:()=>Z(!1),theme:i}),e.jsx("button",{onClick:le,className:`${D} transition-all duration-500`,style:{...P,...$},children:a?b:m}),e.jsx("button",{onClick:ve,className:`${T} transition-all p-1  duration-500`,style:c,children:L})]}):e.jsxs("div",{className:"relative z-[99999999999999999]",children:[e.jsx(J,{isVisible:se&&!a,onClose:()=>Z(!1),theme:i}),e.jsx("button",{onClick:le,className:`${S} transition-all duration-500`,style:$,children:a?w:d}),e.jsx("button",{onClick:be,className:`${O} transition-all p-1  duration-500`,style:A,children:C})]})}),a&&e.jsxs(e.Fragment,{children:[e.jsx(K,{x:E?window.innerWidth/2:te.x,y:E?window.innerHeight/2:te.y,Theme:i,name:((ie=t[l])==null?void 0:ie.name)||"Guide",color:((ne=t[l])==null?void 0:ne.color)||"#ff6b6b",message:E?"Hey the tour is incomplete!":(ae=t[l])==null?void 0:ae.message,isVisible:ue,onClick:re,showNext:!0,isOffScreen:E,cursorImage:V,messageBoxStyle:p,cursorStyle:z,nextButtonText:G,nextButtonContinueText:I,nextButtonClassName:q,nextButtonStyle:x,messageClass:R,CursorMessageGap:((de=t[l])==null?void 0:de.CursorMessageGap)||0,CustomCursorClass:X}),v&&e.jsxs("div",{className:`fixed top-4 right-4 z-[999999999] ${i=="Dark"?"bg-[#202020]":"bg-white/90"} backdrop-blur-sm border rounded-full px-4 py-2 shadow-lg`,children:[e.jsxs("div",{className:`text-sm font-medium ${i=="Dark"?"text-white":"text-gray-700"} `,children:[e.jsxs("span",{className:"hidden sm:!block text-center",children:["Step ",l+1," of ",t.length]}),e.jsxs("span",{className:"sm:hidden",children:[l+1,"/",t.length]})]}),e.jsx("div",{className:"w-full h-1 bg-gray-200 rounded-full mt-1",children:e.jsx("div",{className:"h-full bg-gradient-to-r from-purple-500 to-blue-500 rounded-full transition-all duration-500",style:{width:`${(l+1)/t.length*100}%`}})})]})]})]})};f.TourCursor=K,f.default=ce,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
//# sourceMappingURL=index.umd.cjs.map