next-tour - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/index.d.ts

 import React$1 from 'react';
 
-type FloatingPosition = 'top-center' | 'bottom-center' | 'left-center' | 'right-center' | 'window-center';
+type FloatingPosition = 'top' | 'bottom' | 'left' | 'right' | 'center';
 
 interface TourOptions {
     /**
-     * Whether to show the tour navigation buttons.
-     * Enables navigating through the tour steps with next and previous buttons.
+     * Whether to show the tour progress indicator.
+     * Displays the beautiful progress bar indicating the user's progress through the tour.
      * @default true
      */
-    showNavigation?: boolean;
+    showProgress?: boolean;
     /**
-     * Whether to show the tour progress indicator.
-     * Displays the current step number over the total steps, providing users with a sense of how much of the tour remains.
+     * Indicates whether the close button should be displayed on the tour.
+     * Allows users to exit the tour before completion.
      * @default true
      */
-    showProgress?: boolean;
+    showCloseButton?: boolean;
     /**
-     * Whether to visually highlight the target element of each tour step.
-     * When enabled, draws attention to the element that the tour step is focused on.
+     * Indicates whether the back button should be displayed on the tour.
+     * Allows users to navigate to the previous step of the tour.
      * @default true
      */
-    highlightTarget?: boolean;
+    showBackButton?: boolean;
     /**
+     * Whether to dim the background of the step.
+     * When enabled, the step's background will be dimmed to highlight the target element.
+     * @default true
+     */
+    showOverlay?: boolean;
+    /**
      * Whether to prevent the tour from closing when clicking outside the tour step.
@@ -33,19 +39,24 @@ * When enabled, the tour will only close when the user clicks the close button or completes the tour.
     /**
-     * Whether to show the close button on the tour.
-     * Allows users to exit the tour before completion.
-     * @default true
+     * Specifies the placement of the tour step relative to the target element.
+     * This determines the position where the tour guide box will appear around the target.
+     *
+     * @default "bottom-center"
      */
-    showCloseButton?: boolean;
+    placement?: FloatingPosition;
     /**
-     * Whether to show the skip button on the tour.
-     * Enables users to skip the tour and proceed to the end.
-     * @default true
+     * A callback function that is executed before moving to the next step.
+     * It can return a boolean or a Promise that resolves to a boolean.
+     * If `false` is returned, the tour will not proceed to the next step.
      */
-    showSkipButton?: boolean;
+    onBeforeNext?: () => boolean | Promise<boolean> | void;
     /**
-     * Whether to show the back button on the tour.
-     * Allows users to navigate to the previous step of the tour.
-     * @default true
+     * A callback function that is executed before moving back to the previous step.
+     * It can return a boolean or a Promise that resolves to a boolean.
+     * If `false` is returned, the tour will not move back to the previous step.
      */
-    showBackButton?: boolean;
+    onBeforeBack?: () => boolean | Promise<boolean> | void;
+    /** A callback function that is executed after moving to the next step. */
+    onNext?: () => boolean | Promise<boolean> | void;
+    /** A callback function that is executed after moving back to the previous step. */
+    onBack?: () => boolean | Promise<boolean> | void;
 }
@@ -61,3 +72,3 @@
 }
-interface TourStep {
+interface TourStep extends StepOptions {
     /** Optional target element to highlight during this step.
@@ -73,9 +84,2 @@ * If not provided, the step will be displayed in center of the screen like a modal.
     content: React.ReactNode;
-    /**
-     * Optional position of the step
-     * @default "bottom-center"
-     */
-    position?: FloatingPosition;
-    /** Optional configuration options for the step. */
-    options?: StepOptions;
 }
@@ -82,0 +86,0 @@

dist/index.js

@@ -1,3 +0,2 @@
-"use strict";var ft=Object.create;var k=Object.defineProperty;var vt=Object.getOwnPropertyDescriptor;var ht=Object.getOwnPropertyNames;var gt=Object.getPrototypeOf,bt=Object.prototype.hasOwnProperty;var xt=(t,o)=>{for(var e in o)k(t,e,{get:o[e],enumerable:!0})},W=(t,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of ht(o))!bt.call(t,n)&&n!==e&&k(t,n,{get:()=>o[n],enumerable:!(r=vt(o,n))||r.enumerable});return t};var d=(t,o,e)=>(e=t!=null?ft(gt(t)):{},W(o||!t||!t.__esModule?k(e,"default",{value:t,enumerable:!0}):e,t)),yt=t=>W(k({},"__esModule",{value:!0}),t);var Vt={};xt(Vt,{Tour:()=>q,TourProvider:()=>B,useTourControls:()=>h,useTourState:()=>p});module.exports=yt(Vt);var Y=d(require("react"));var f=d(require("react")),w=f.default.createContext(null),Tt=({children:t})=>{var T;let[o,e]=f.default.useState(!1),[r,n]=f.default.useState(null),[i,s]=f.default.useState(0),a=f.default.useRef([]),u=(T=r==null?void 0:r.steps.length)!=null?T:0,c=l=>{a.current.push(l)},m=l=>{let z=a.current.find(mt=>mt.id===l);z&&(n(z),e(!0),s(0))},g=()=>{e(!1),n(null),s(0)},b=f.default.useCallback(()=>{s(l=>Math.min(u-1,l+1))},[u]),P=f.default.useCallback(()=>{s(l=>Math.max(0,l-1))},[]),C=f.default.useCallback(l=>{l<1||l>=u||s(l-1)},[u]),E=f.default.useMemo(()=>{var l;return(l=r==null?void 0:r.steps[i])!=null?l:null},[r,i]),L=f.default.useMemo(()=>({isTourOpen:o,activeStep:E,activeTour:r,activeStepIndex:i,totalSteps:u,tours:a.current,addTour:c,startTour:m,endTour:g,goToStep:C,nextStep:b,prevStep:P}),[o,r,E,i,u,C,b,P]);return f.default.createElement(w.Provider,{value:L},t)},K=Tt;var wt=t=>Y.default.createElement(K,{...t}),B=wt;function H(t,{insertAt:o}={}){if(!t||typeof document=="undefined")return;let e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",o==="top"&&e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}H(`:root{--gray1: #fcfcfc;--gray2: #f9f9f9;--gray3: #f0f0f0;--gray4: #e8e8e8;--gray5: #e0e0e0;--gray6: #d9d9d9;--gray7: #cecece;--gray8: #bbbbbb;--gray9: #8d8d8d;--gray10: #838383;--gray11: #646464;--gray12: #202020;--color-bg: #fff;--color-fg: var(--gray12);--color-secondary: var(--gray6);--color-secondary-fg: var(--gray9);--color-muted: var(--gray3);--color-muted-fg: var(--gray8);--color-border: var(--gray7);--color-border-hover: var(--gray6);--color-border-muted: var(--gray4);--color-border-muted-hover: var(--gray5);--shadow-border: 0 0 0 1px rgba(0, 0, 0, .08);--transition: cubic-bezier(.4, 0, .2, 1);--duration: .4s;--sc-1: .25rem;--sc-2: .5rem;--sc-3: .75rem;--sc-4: 1rem;--sc-5: 1.25rem;--sc-6: 1.5rem;--rd-1: .25rem;--rd-2: .5rem;--rd-3: .75rem;--rd-4: 1rem}.nt-popover{position:fixed;z-index:10010;top:0;left:0}.nt-popover.enable-transition{transition:top var(--duration) var(--transition),left var(--duration) var(--transition)}.nt-popover-overlay{position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;animation:NtFadeIn var(--duration) var(--transition)}.nt-popover-overlay.active{background-color:#00000080}@keyframes NtFadeIn{0%{opacity:0}to{opacity:1}}.nt-step-container{min-width:350px;background-color:var(--color-bg);color:var(--color-fg);box-shadow:var(--shadow-border),0 1px 1px #00000005,0 4px 8px -4px #0000000a,0 16px 24px -8px #0000000f;border-radius:var(--rd-3);animation:ntScaleUp var(--duration) var(--transition);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.nt-step-container[data-target-highlight=true]{box-shadow:none}.nt-button{border:none;padding:var(--sc-3) var(--sc-5);width:auto;overflow:visible;outline:none;background:var(--gray12);cursor:pointer;color:var(--gray1);font:inherit;font-weight:500;text-align:center;font-size:.875rem;border-radius:var(--rd-2);opacity:1;line-height:normal;transition:all .15s var(--transition)}.nt-button:hover{opacity:.8}.nt-button[data-variant=outline]{background-color:transparent;color:var(--color-fg);border:1px solid var(--color-border)}.nt-button[data-variant=outline]:hover{background-color:var(--color-muted);border:1px solid var(--color-border-hover);opacity:1}.nt-step-footer{width:100%;padding:var(--sc-4);display:flex;flex-direction:column;justify-content:center;align-items:center;border-top:1px solid var(--color-border-muted);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;gap:var(--sc-4)}.nt-step-actions{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sc-1)}.nt-step-content{padding:var(--sc-4);display:flex;flex-direction:column;justify-content:center;align-items:start;text-align:start;gap:var(--sc-2);max-width:340px;text-wrap:pretty}.nt-step-title{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}@keyframes ntScaleUp{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.nt-step-progress{height:4px;width:100%;background-color:var(--color-muted);border-radius:999px;position:relative;overflow:hidden}.nt-step-progress-bar{height:100%;width:0;background-color:var(--color-secondary-fg);transition:width .3s var(--transition);border-radius:inherit}
-`);var S=d(require("react"));var $=d(require("react"));var St=()=>{let t=$.default.useContext(w);if(!t)throw new Error("useTourControls must be used within a <TourProvider> component");let{startTour:o,endTour:e,goToStep:r,nextStep:n,prevStep:i,addTour:s}=t;return{startTour:o,endTour:e,goToStep:r,nextStep:n,prevStep:i,addTour:s}},h=St;var J=d(require("react"));var Pt=()=>{let t=J.default.useContext(w);if(!t)throw new Error("useTourState must be used within a <TourProvider> component");let{tours:o,activeStepIndex:e,activeTour:r,activeStep:n,isTourOpen:i,totalSteps:s}=t;return{tours:o,activeStepIndex:e,activeTour:r,isTourOpen:i,totalSteps:s,activeStep:n}},p=Pt;var X=d(require("react"));var Q=`
+"use strict";var ht=Object.create;var A=Object.defineProperty;var bt=Object.getOwnPropertyDescriptor;var vt=Object.getOwnPropertyNames;var yt=Object.getPrototypeOf,xt=Object.prototype.hasOwnProperty;var Tt=(t,o)=>{for(var e in o)A(t,e,{get:o[e],enumerable:!0})},$=(t,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of vt(o))!xt.call(t,n)&&n!==e&&A(t,n,{get:()=>o[n],enumerable:!(r=bt(o,n))||r.enumerable});return t};var p=(t,o,e)=>(e=t!=null?ht(yt(t)):{},$(o||!t||!t.__esModule?A(e,"default",{value:t,enumerable:!0}):e,t)),gt=t=>$(A({},"__esModule",{value:!0}),t);var Ht={};Tt(Ht,{Tour:()=>K,TourProvider:()=>D,useTourControls:()=>y,useTourState:()=>h});module.exports=gt(Ht);var et=p(require("react"));var f=p(require("react"));var X=`
   a[href]:not([tabindex^="-"]),
@@ -17,2 +16,3 @@ area[href]:not([tabindex^="-"]),
   object[usemap]:not([tabindex^="-"])
-  `,G="bottom-center";var Ct=(t,o=!0)=>{X.default.useEffect(()=>{var s;if(!o)return;let e=t.current;if(!e)return;let r=()=>Array.from(e.querySelectorAll(Q)).filter(a=>!a.hasAttribute("disabled")),n=r();(s=n[0])==null||s.focus();let i=a=>{if(a.key!=="Tab"||n.length===0)return;let u=n[0],c=n[n.length-1],m=document.activeElement,g=!a.shiftKey&&m===c,b=a.shiftKey&&m===u;(g||b)&&((a.shiftKey?u:c).focus(),a.preventDefault()),n=r()};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[t,o])},_=Ct;var Et=()=>{var s,a,u,c;let{activeTour:t}=p(),o=t==null?void 0:t.options,e=(s=o==null?void 0:o.highlightTarget)!=null?s:!0,r=(a=o==null?void 0:o.preventCloseOnClickOutside)!=null?a:!1,n=(u=o==null?void 0:o.showNavigation)!=null?u:!0,i=(c=o==null?void 0:o.showProgress)!=null?c:!0;return{highlightTarget:e,preventCloseOnClickOutside:r,showNavigation:n,showProgress:i}},V=Et;var N=require("react");var Z=t=>{if(!t||!window.visualViewport)return!1;let o=t.getBoundingClientRect();return o.top>=0&&o.left>=0&&o.bottom<=window.visualViewport.height-40&&o.right<=window.visualViewport.width},F=(t,o,e)=>{let r=t.style[o];return t.style[o]=e,()=>{t.style[o]=r}},M=(...t)=>{let o=[];for(let e of t)if(e){if(typeof e=="string")o.push(e);else if(Array.isArray(e))o.push(M(...e));else if(typeof e=="object")for(let[r,n]of Object.entries(e))n&&o.push(r)}return o.join(" ")},R=(t,o=100)=>{let e;return()=>{e&&clearTimeout(e),e=window.setTimeout(()=>{t()},o)}},tt=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),ot=typeof window!="undefined";var kt=ot?N.useLayoutEffect:N.useEffect,Ft=t=>{kt(()=>{if(!t)return;let o=tt?Nt():Mt();return()=>{o()}},[t])},Mt=()=>{let t=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=t}},Nt=()=>{let t={overflow:document.body.style.overflow,position:document.body.style.position,top:document.body.style.top,left:document.body.style.left,right:document.body.style.right},o=window.scrollY;return document.body.style.position="fixed",document.body.style.top=`-${o}px`,document.body.style.overflow="hidden",()=>{document.body.style.overflow=t.overflow,document.body.style.position=t.position,document.body.style.top=t.top,document.body.style.left=t.left,document.body.style.right=t.right,window.scrollTo(0,o)}},j=Ft;var x=d(require("react"));var et=(t,o,e)=>{let i=0,s=0;if(!e||o==="window-center")i=window.innerHeight/2-t.height/2,s=window.innerWidth/2-t.width/2;else switch(o){case"top-center":i=e.top-t.height-10,s=e.left+e.width/2-t.width/2;break;case"bottom-center":i=e.top+e.height+10,s=e.left+e.width/2-t.width/2;break;case"left-center":i=e.top+e.height/2-t.height/2,s=e.left-t.width-10;break;case"right-center":i=e.top+e.height/2-t.height/2,s=e.left+e.width+10;break}return i=Math.max(10,Math.min(i,window.innerHeight-t.height-10)),s=Math.max(10,Math.min(s,window.innerWidth-t.width-10)),{top:i,left:s}},rt=(t,o)=>{if(!t){o();return}t.scrollIntoView({behavior:"smooth",block:"center"});let e=null,r=!1,n=()=>{r=!1;let a=t.getBoundingClientRect().top;if(a===e){o();return}e=a,i()},i=()=>{r||(requestAnimationFrame(n),r=!0)};R(i,100)()};var v=d(require("react")),nt=d(require("react-dom"));var it=v.default.createContext(null),Ot=()=>{let t=v.default.useContext(it);if(!t)throw new Error("usePopover must be used within a Popover component");return t},st=({children:t,open:o,preferredPosition:e=G,target:r,onClickOutside:n,shouldHighlightTarget:i=!0})=>o?v.default.createElement(it.Provider,{value:{open:o,preferredPosition:e,target:r,onClickOutside:n,shouldHighlightTarget:i}},t):null,At=({children:t,className:o,...e})=>{let{open:r,target:n,preferredPosition:i,onClickOutside:s,shouldHighlightTarget:a}=Ot(),u=v.default.useRef(null),[c,m]=v.default.useState(!1);return v.default.useEffect(()=>{let{current:g}=u;if(!r||!g)return;let b;(()=>{let E=n==null?void 0:n.getBoundingClientRect(),L=g.getBoundingClientRect(),T=et(L,i,E);F(g,"top",`${T.top}px`),F(g,"left",`${T.left}px`)})();let C=setTimeout(()=>{m(!0)},20);return a&&n&&(b=F(n,"zIndex","10001")),()=>{b&&b(),clearTimeout(C)}},[r,n,i,a]),_(u,r),j(r),nt.default.createPortal(v.default.createElement(v.default.Fragment,null,v.default.createElement("div",{className:M("nt-popover-overlay",{active:r&&!!a}),onClick:s}),v.default.createElement("div",{...e,ref:u,className:M("nt-popover",{"enable-transition":c},o)},t)),document.body)};st.Content=At;var O=st;var U=d(require("react")),at=({children:t})=>U.default.createElement("div",{className:"nt-step-content"},t),It=({children:t})=>U.default.createElement("h3",{className:"nt-step-title"},t);at.Title=It;var D=at;var I=d(require("react"));var y=d(require("react"));var Lt=()=>{let{totalSteps:t,activeStepIndex:o}=p(),{nextStep:e,prevStep:r,endTour:n}=h(),i=t>1&&o>0,s=o<t-1,a=o===t-1;return y.default.createElement("div",{className:"nt-step-actions"},i&&y.default.createElement("button",{onClick:()=>r(),className:"nt-button","data-variant":"outline"},"Back"),y.default.createElement("button",{onClick:()=>n(),className:"nt-button","data-variant":"outline"},"Close"),y.default.createElement("div",{style:{flex:1}}),s&&y.default.createElement("button",{onClick:()=>e(),className:"nt-button","data-variant":"primary"},"Next"),a&&y.default.createElement("button",{onClick:()=>n(),className:"nt-button","data-variant":"primary"},"Finish"))},ut=Lt;var A=d(require("react"));var Bt=()=>{let{activeStepIndex:t,totalSteps:o}=p(),e=A.default.useMemo(()=>o===0?0:t===o-1?100:t/o*100,[t,o]);return A.default.createElement("div",{className:"nt-step-progress"},A.default.createElement("div",{className:"nt-step-progress-bar",style:{width:`${e}%`}}))},lt=Bt;var Ht=()=>I.default.createElement("footer",{className:"nt-step-footer"},I.default.createElement(lt,null),I.default.createElement(ut,null)),ct=Ht;var _t=({step:t})=>{let{endTour:o}=h(),{isTourOpen:e}=p(),{highlightTarget:r,preventCloseOnClickOutside:n}=V(),[i,s]=x.default.useState(null);return x.default.useEffect(()=>{if(!t){s(null);return}let{target:a}=t;if(!a){s(null);return}let u=()=>{let m=document.querySelector(a);return m?Z(m)?(s(m),!0):(rt(m,()=>s(m)),!0):!1};if(u())return;let c=new MutationObserver(()=>{u()&&c.disconnect()});return c.observe(document.body,{childList:!0,subtree:!0}),()=>{c.disconnect(),s(null)}},[t,e]),!t||!e?null:x.default.createElement(O,{open:e,target:i,preferredPosition:t.position,shouldHighlightTarget:r,onClickOutside:()=>{n||o()}},x.default.createElement(O.Content,{className:"nt-step-container","data-target-highlight":r},x.default.createElement(D,null,x.default.createElement(D.Title,null,t.title),t.content),x.default.createElement(ct,null)))},dt=_t;var pt=S.default.memo(({id:t,...o})=>{let{activeTour:e,activeStep:r}=p(),{addTour:n}=h(),i=S.default.useMemo(()=>({id:t,...o}),[t,o]);return S.default.useEffect(()=>{n(i)},[n,i]),(e==null?void 0:e.id)===t?S.default.createElement(dt,{step:r}):null});pt.displayName="Next Tour";var q=pt;0&&(module.exports={Tour,TourProvider,useTourControls,useTourState});
+  `,I="bottom";var G=t=>{if(!t||!window.visualViewport)return!1;let o=t.getBoundingClientRect();return o.top>=0&&o.left>=0&&o.bottom<=window.visualViewport.height-40&&o.right<=window.visualViewport.width},J=(t,o,e)=>{let r=t.style[o];return t.style[o]=e,()=>{t.style[o]=r}},L=(...t)=>{let o=[];for(let e of t)if(e){if(typeof e=="string")o.push(e);else if(Array.isArray(e))o.push(L(...e));else if(typeof e=="object")for(let[r,n]of Object.entries(e))n&&o.push(r)}return o.join(" ")},Q=(t,o=100)=>{let e=null;return()=>{e!==null&&(clearTimeout(e),e=null),e=setTimeout(()=>{t(),e=null},o)}},Z=typeof window!="undefined";var R=({popoverRect:t,targetRect:o,preferredPosition:e,padding:r=10})=>{let{innerWidth:n,innerHeight:a}=window,i=0,s=0;if(!o)return i=(n-t.width)/2,s=(a-t.height)/2,{translateX:i,translateY:s};let u=d=>d>=0&&d+t.width<=n,l=d=>d>=0&&d+t.height<=a;switch(e){case"top":i=o.left+(o.width-t.width)/2,s=o.top-t.height-r;break;case"right":i=o.right+r,s=o.top+(o.height-t.height)/2;break;case"bottom":i=o.left+(o.width-t.width)/2,s=o.bottom+r;break;case"left":i=o.left-t.width-r,s=o.top+(o.height-t.height)/2;break;case"center":i=(n-t.width)/2,s=(a-t.height)/2;break}return u(i)||(e==="left"||e==="right"?(i=e==="left"?o.right+r:o.left-t.width-r,u(i)||(i=(n-t.width)/2)):i=(n-t.width)/2),l(s)||(e==="top"||e==="bottom"?(s=e==="top"?o.bottom+r:o.top-t.height-r,l(s)||(s=(a-t.height)/2)):s=(a-t.height)/2),{translateX:i,translateY:s}},tt=(t,o)=>{if(!t){o();return}t.scrollIntoView({behavior:"smooth",block:"center"});let e=null,r=!1,n=()=>{r=!1;let s=t.getBoundingClientRect().top;if(s===e){o();return}e=s,a()},a=()=>{r||(requestAnimationFrame(n),r=!0)};Q(a,500)()},w=t=>({...{showOverlay:!0,preventCloseOnClickOutside:!1,showBackButton:!0,showCloseButton:!0,showProgress:!0},...t==null?void 0:t.options}),P=t=>({...{placement:I},...t});async function C(t){return t?await t()!==!1:!0}var O=f.default.createContext(null),wt=({children:t})=>{var F;let[o,e]=f.default.useState(!1),[r,n]=f.default.useState(null),[a,i]=f.default.useState(0),s=f.default.useRef([]),u=(F=r==null?void 0:r.steps.length)!=null?F:0,l=f.default.useMemo(()=>{var c;return(c=r==null?void 0:r.steps[a])!=null?c:null},[r,a]),d=c=>{s.current.push(c)},m=c=>{let N=s.current.find(S=>S.id===c);N&&(n(N),e(!0),i(0))},v=()=>{e(!1),n(null),i(0)},T=f.default.useCallback(async()=>{let c=P(l);await C(c.onBeforeNext)&&(i(S=>Math.min(u-1,S+1)),await C(c.onNext))},[l,u]),k=f.default.useCallback(async()=>{let c=P(l);await C(c.onBeforeBack)&&(i(S=>Math.max(0,S-1)),await C(c.onBack))},[l]),B=f.default.useCallback(c=>{c<0||c>=u||i(c-1)},[u]),j=f.default.useMemo(()=>({isTourOpen:o,activeStep:l,activeTour:r,activeStepIndex:a,totalSteps:u,tours:s.current,addTour:d,startTour:m,endTour:v,goToStep:B,nextStep:T,prevStep:k}),[o,l,r,a,u,B,T,k]);return f.default.createElement(O.Provider,{value:j},t)},ot=wt;var St=t=>et.default.createElement(ot,{...t}),D=St;function U(t,{insertAt:o}={}){if(!t||typeof document=="undefined")return;let e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",o==="top"&&e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}U(`:root{--gray1: #fcfcfc;--gray2: #f9f9f9;--gray3: #f0f0f0;--gray4: #e8e8e8;--gray5: #e0e0e0;--gray6: #d9d9d9;--gray7: #cecece;--gray8: #bbbbbb;--gray9: #8d8d8d;--gray10: #838383;--gray11: #646464;--gray12: #202020;--color-bg: #fff;--color-fg: var(--gray12);--color-secondary: var(--gray6);--color-secondary-fg: var(--gray9);--color-muted: var(--gray3);--color-muted-fg: var(--gray8);--color-border: var(--gray7);--color-border-hover: var(--gray6);--color-border-muted: var(--gray4);--color-border-muted-hover: var(--gray5);--shadow-border: 0 0 0 1px rgba(0, 0, 0, .08);--transition: cubic-bezier(.4, 0, .2, 1);--duration: .4s;--sc-1: .25rem;--sc-2: .5rem;--sc-3: .75rem;--sc-4: 1rem;--sc-5: 1.25rem;--sc-6: 1.5rem;--rd-1: .25rem;--rd-2: .5rem;--rd-3: .75rem;--rd-4: 1rem}.nt-popover{position:fixed;z-index:10010;top:0;left:0}.nt-popover.enable-transition{transition:transform var(--duration) var(--transition);will-change:transform}.nt-popover-overlay{position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;animation:nt-fade-in var(--duration) var(--transition)}.nt-popover-overlay.active{background-color:#00000080}.nt-step-container{min-width:350px;background-color:var(--color-bg);color:var(--color-fg);box-shadow:var(--shadow-border),0 1px 1px #00000005,0 4px 8px -4px #0000000a,0 16px 24px -8px #0000000f;border-radius:var(--rd-3);animation:nt-fade-in var(--duration) var(--transition);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.nt-step-container[data-show-overlay=true]{box-shadow:none}.nt-button{border:none;padding:var(--sc-3) var(--sc-5);width:auto;overflow:visible;outline:none;background:var(--gray12);cursor:pointer;color:var(--gray1);font:inherit;font-weight:500;text-align:center;font-size:.875rem;border-radius:var(--rd-2);opacity:1;line-height:normal;transition:all .15s var(--transition)}.nt-button:hover{opacity:.8}.nt-button[data-variant=outline]{background-color:transparent;color:var(--color-fg);border:1px solid var(--color-border)}.nt-button[data-variant=outline]:hover{background-color:var(--color-muted);border:1px solid var(--color-border-hover);opacity:1}.nt-step-footer{width:100%;padding:var(--sc-4);display:flex;flex-direction:column;justify-content:center;align-items:center;border-top:1px solid var(--color-border-muted);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;gap:var(--sc-4)}.nt-step-actions{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sc-1)}.nt-step-content{padding:var(--sc-4);display:flex;flex-direction:column;justify-content:center;align-items:start;text-align:start;gap:var(--sc-2);max-width:340px;text-wrap:pretty}.nt-step-title{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}.nt-step-progress{height:4px;width:100%;background-color:var(--color-muted);border-radius:999px;position:relative;overflow:hidden}.nt-step-progress-bar{height:100%;width:0;background-color:var(--color-secondary-fg);transition:width .3s var(--transition);border-radius:inherit}@keyframes nt-fade-in{0%{opacity:0}to{opacity:1}}
+`);var E=p(require("react"));var rt=p(require("react"));var Pt=()=>{let t=rt.default.useContext(O);if(!t)throw new Error("useTourControls must be used within a <TourProvider> component");let{startTour:o,endTour:e,goToStep:r,nextStep:n,prevStep:a,addTour:i}=t;return{startTour:o,endTour:e,goToStep:r,nextStep:n,prevStep:a,addTour:i}},y=Pt;var nt=p(require("react"));var Ct=()=>{let t=nt.default.useContext(O);if(!t)throw new Error("useTourState must be used within a <TourProvider> component");let{tours:o,activeStepIndex:e,activeTour:r,activeStep:n,isTourOpen:a,totalSteps:i}=t;return{tours:o,activeStepIndex:e,activeTour:r,isTourOpen:a,totalSteps:i,activeStep:n}},h=Ct;var st=p(require("react"));var Ot=(t,o=!0)=>{st.default.useEffect(()=>{var i;if(!o)return;let e=t.current;if(!e)return;let r=()=>Array.from(e.querySelectorAll(X)).filter(s=>!s.hasAttribute("disabled")),n=r();(i=n[0])==null||i.focus();let a=s=>{if(s.key!=="Tab"||n.length===0)return;let u=n[0],l=n[n.length-1],d=document.activeElement,m=!s.shiftKey&&d===l,v=s.shiftKey&&d===u;(m||v)&&((s.shiftKey?u:l).focus(),s.preventDefault()),n=r()};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[t,o])},q=Ot;var M=require("react");var Et=Z?M.useLayoutEffect:M.useEffect,kt=t=>{Et(()=>{if(!t)return;let e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent)?Ft():Bt();return()=>{e()}},[t])},Bt=()=>{let t=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=t}},Ft=()=>{let t={overflow:document.body.style.overflow,position:document.body.style.position,top:document.body.style.top,left:document.body.style.left,right:document.body.style.right},o=window.scrollY;return document.body.style.position="fixed",document.body.style.top=`-${o}px`,document.body.style.overflow="hidden",()=>{document.body.style.overflow=t.overflow,document.body.style.position=t.position,document.body.style.top=t.top,document.body.style.left=t.left,document.body.style.right=t.right,window.scrollTo(0,o)}},z=kt;var x=p(require("react"));var b=p(require("react")),it=p(require("react-dom"));var at=b.default.createContext(null),Nt=()=>{let t=b.default.useContext(at);if(!t)throw new Error("usePopover must be used within a Popover component");return t},ut=({children:t,open:o,preferredPosition:e=I,target:r,onClickOutside:n,shouldShowOverlay:a=!0})=>o?b.default.createElement(at.Provider,{value:{open:o,preferredPosition:e,target:r,onClickOutside:n,shouldShowOverlay:a}},t):null,At=({children:t,className:o,...e})=>{let{open:r,target:n,preferredPosition:a,onClickOutside:i,shouldShowOverlay:s}=Nt(),u=b.default.useRef(null),[l,d]=b.default.useState(!1);return b.default.useEffect(()=>{let{current:m}=u;if(!r||!m)return;(()=>{let B=n==null?void 0:n.getBoundingClientRect(),j=m.getBoundingClientRect(),{translateX:F,translateY:c}=R({popoverRect:j,targetRect:B,preferredPosition:a});requestAnimationFrame(()=>{m.style.transform=`translate(${F}px, ${c}px)`})})();let T;s&&n&&(T=J(n,"zIndex","10001"));let k=setTimeout(()=>{l||d(!0)},20);return()=>{T&&T(),clearTimeout(k)}},[r,n,a,s]),q(u,r),z(r),it.default.createPortal(b.default.createElement(b.default.Fragment,null,b.default.createElement("div",{className:L("nt-popover-overlay",{active:r&&!!s}),onClick:i}),b.default.createElement("div",{...e,ref:u,className:L("nt-popover",{"enable-transition":l},o)},t)),document.body)};ut.Content=At;var _=ut;var Y=p(require("react")),lt=({children:t})=>Y.default.createElement("div",{className:"nt-step-content"},t),It=({children:t})=>Y.default.createElement("h3",{className:"nt-step-title"},t);lt.Title=It;var W=lt;var H=p(require("react"));var g=p(require("react"));var Lt=()=>{let{totalSteps:t,activeStepIndex:o,activeTour:e}=h(),{nextStep:r,prevStep:n,endTour:a}=y(),{showBackButton:i,showCloseButton:s}=w(e),u=t>1&&o>0&&i,l=o<t-1,d=o===t-1;return g.default.createElement("div",{className:"nt-step-actions"},u&&g.default.createElement("button",{onClick:()=>n(),className:"nt-button","data-variant":"outline"},"Back"),s&&g.default.createElement("button",{onClick:()=>a(),className:"nt-button","data-variant":"outline"},"Close"),g.default.createElement("div",{style:{flex:1}}),l&&g.default.createElement("button",{onClick:()=>r(),className:"nt-button","data-variant":"primary"},"Next"),d&&g.default.createElement("button",{onClick:()=>a(),className:"nt-button","data-variant":"primary"},"Finish"))},ct=Lt;var V=p(require("react"));var Mt=()=>{let{activeStepIndex:t,totalSteps:o,activeTour:e}=h(),{showProgress:r}=w(e),n=V.default.useMemo(()=>o===0?0:t===o-1?100:t/o*100,[t,o]);return r?V.default.createElement("div",{className:"nt-step-progress"},V.default.createElement("div",{className:"nt-step-progress-bar",style:{width:`${n}%`}})):null},dt=Mt;var _t=()=>H.default.createElement("footer",{className:"nt-step-footer"},H.default.createElement(dt,null),H.default.createElement(ct,null)),pt=_t;var Vt=({step:t})=>{let{endTour:o}=y(),{isTourOpen:e,activeTour:r}=h(),{showOverlay:n,preventCloseOnClickOutside:a}=w(r),{placement:i}=P(t),[s,u]=x.default.useState(null);return x.default.useEffect(()=>{if(!t){u(null);return}let{target:l}=t;if(!l){u(null);return}let d=()=>{let v=document.querySelector(l);return v?G(v)?(u(v),!0):(tt(v,()=>u(v)),!0):!1};if(d())return;let m=new MutationObserver(()=>{d()&&m.disconnect()});return m.observe(document.body,{childList:!0,subtree:!0}),()=>{m.disconnect(),u(null)}},[t,e]),!t||!e?null:x.default.createElement(_,{open:e,target:s,preferredPosition:i,shouldShowOverlay:n,onClickOutside:()=>{a||o()}},x.default.createElement(_.Content,{className:"nt-step-container","data-show-overlay":n},x.default.createElement(W,null,x.default.createElement(W.Title,null,t.title),t.content),x.default.createElement(pt,null)))},ft=Vt;var mt=E.default.memo(({id:t,...o})=>{let{activeTour:e,activeStep:r}=h(),{addTour:n}=y(),a=E.default.useMemo(()=>({id:t,...o}),[t,o]);return E.default.useEffect(()=>{n(a)},[n,a]),(e==null?void 0:e.id)===t?E.default.createElement(ft,{step:r}):null});mt.displayName="Next Tour";var K=mt;0&&(module.exports={Tour,TourProvider,useTourControls,useTourState});

package.json

 {
   "name": "next-tour",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Guided tours and walkthroughs for Next.js",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36719

increased by5.04%

Lines of code

242

increased by2.98%

No dependency changes