@skdx/react 0.26.0 → 0.28.0

package/dist/tour/Tour.cjs

@@ -1 +1 @@
-"use strict";var bt=Object.create;var B=Object.defineProperty;var Et=Object.getOwnPropertyDescriptor;var Nt=Object.getOwnPropertyNames;var Ht=Object.getPrototypeOf,Lt=Object.prototype.hasOwnProperty;var It=(e,t)=>{for(var r in t)B(e,r,{get:t[r],enumerable:!0})},Ce=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Nt(t))!Lt.call(e,i)&&i!==r&&B(e,i,{get:()=>t[i],enumerable:!(n=Et(t,i))||n.enumerable});return e};var c=(e,t,r)=>(r=e!=null?bt(Ht(e)):{},Ce(t||!e||!e.__esModule?B(r,"default",{value:e,enumerable:!0}):r,e)),Mt=e=>Ce(B({},"__esModule",{value:!0}),e);var Vt={};It(Vt,{Tour:()=>Z,TourArrow:()=>ae,TourBackdrop:()=>te,TourCloseTrigger:()=>de,TourContent:()=>ie,TourDescription:()=>ue,TourNextTrigger:()=>le,TourPortal:()=>ee,TourPrevTrigger:()=>me,TourProgressText:()=>ce,TourSkipTrigger:()=>fe,TourSpotlight:()=>re,TourTitle:()=>pe,TourTrigger:()=>j});module.exports=Mt(Vt);var s=c(require("react"),1),v=require("../utils/clamp.cjs"),Se=require("../utils/createContext.cjs"),we=require("../utils/liveAnnouncer.cjs"),O=require("../utils/popper.cjs"),C=require("../utils/useCallbackRef.cjs"),Y=require("../utils/useControllableState.cjs"),L=require("react/jsx-runtime"),[Dt,o]=(0,Se.createSafeContext)("Tour"),At=50;function Bt(e,t,r){return[e.title,`Step ${t+1} of ${r}`].filter(Boolean).join(", ")}function ke(e){return e?typeof e=="string"?document.querySelector(e):e.current:null}function Ot({target:e}){let{setAnchor:t}=(0,O.usePopperContext)("TourAnchor");return s.useEffect(()=>{t(e)},[e,t]),null}function Z({children:e,steps:t,open:r,defaultOpen:n=!1,onOpenChange:i,step:d,defaultStep:T=0,onStepChange:G,onComplete:g,onSkip:J,closeOnEscape:p=!0,closeOnInteractOutside:I=!1,spotlightPadding:P=8,targetTimeout:m=2e3,onStepTargetMissing:k,getAnnouncement:y}){let Q=s.useRef(null),[l,M]=s.useState(null),[f,x]=s.useState(null),[S=!1,ht]=(0,Y.useControllableState)({prop:r,defaultProp:n,onChange:i}),[u=0,Te]=(0,Y.useControllableState)({prop:d,defaultProp:T,onChange:G}),w=t.length,b=ht,ge=(0,C.useCallbackRef)(g),Pe=(0,C.useCallbackRef)(J),xe=(0,C.useCallbackRef)(k),Re=(0,C.useCallbackRef)(y??Bt),D=s.useRef(t);s.useEffect(()=>{D.current=t});let E=s.useCallback(a=>Te((0,v.clamp)(a,0,Math.max(w-1,0))),[Te,w]),U=s.useCallback(()=>{b(!1),ge()},[b,ge]),vt=s.useCallback(()=>{b(!1),Pe()},[b,Pe]),ye=s.useCallback(()=>{u>=w-1?U():E(u+1)},[u,w,U,E]),Ct=s.useCallback(()=>E(u-1),[E,u]),he=(0,C.useCallbackRef)(ye),X=t[u],R=X?.target,[kt,St]=s.useState(R);kt!==R&&(St(R),M(null)),s.useEffect(()=>{if(!S||!R)return;let a=H=>{H.scrollIntoView?.({block:"center",inline:"center"}),M(H)},N=ke(R);if(N){a(N);return}let A=Date.now(),h=setInterval(()=>{let H=ke(R);if(H){clearInterval(h),a(H);return}Date.now()-A<m||(clearInterval(h),xe(u,D.current[u]),he())},At);return()=>clearInterval(h)},[S,u,R,m,xe,he]),s.useEffect(()=>{let a=()=>x(l?.getBoundingClientRect()??null);if(a(),!!l)return window.addEventListener("scroll",a,!0),window.addEventListener("resize",a),()=>{window.removeEventListener("scroll",a,!0),window.removeEventListener("resize",a)}},[l]),s.useEffect(()=>{if(!S)return;let a=D.current[u];a&&(0,we.announce)(Re(a,u,D.current.length))},[S,u,Re]);let wt=s.useMemo(()=>{if(!f)return{};let a=window.innerWidth,N=window.innerHeight,A=(0,v.clamp)(f.left-P,0,a),h=(0,v.clamp)(f.top-P,0,N);return{"--skdx-tour-x":`${A}px`,"--skdx-tour-y":`${h}px`,"--skdx-tour-width":`${(0,v.clamp)(f.width+P*2,0,a-A)}px`,"--skdx-tour-height":`${(0,v.clamp)(f.height+P*2,0,N-h)}px`}},[f,P]),ve=l!==null&&X?.type!=="dialog";return(0,L.jsxs)(O.PopperRoot,{children:[(0,L.jsx)(Ot,{target:ve?l:null}),(0,L.jsx)(Dt,{steps:t,step:u,total:w,activeStep:X,open:S,anchored:ve,target:l,spotlightStyle:wt,contentRef:Q,contentId:s.useId(),titleId:s.useId(),descriptionId:s.useId(),closeOnEscape:p,closeOnInteractOutside:I,setOpen:b,goTo:E,next:ye,prev:Ct,skip:vt,complete:U,children:e})]})}Z.displayName="Tour";var be=c(require("react"),1),Ee=require("../utils/part.cjs"),$=require("../utils/primitive.cjs");var Ne=require("react/jsx-runtime"),j=be.forwardRef((e,t)=>{let r=o("TourTrigger");return(0,Ne.jsx)($.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed",...e,...(0,Ee.skdxPart)("tour","trigger",e.className),ref:t,onClick:(0,$.composeEventHandlers)(e.onClick,()=>r.setOpen(!0))})});j.displayName="TourTrigger";var He=require("../utils/portal.cjs"),Le=require("../utils/presence.cjs");var Ie=require("react/jsx-runtime"),ee=({forceMount:e,children:t,...r})=>{let n=o("TourPortal"),i=(0,Le.usePresence)(n.open,n.contentRef);return e||i?(0,Ie.jsx)(He.Portal,{...r,children:t}):null};ee.displayName="TourPortal";var V=c(require("react"),1),Me=require("../utils/composeRefs.cjs"),De=require("../utils/part.cjs"),Ae=require("../utils/presence.cjs"),Be=require("../utils/primitive.cjs");var Oe=require("react/jsx-runtime"),te=V.forwardRef(({forceMount:e,...t},r)=>{let n=o("TourBackdrop"),i=V.useRef(null),d=(0,Me.useComposedRefs)(r,i),T=(0,Ae.usePresence)(n.open,i);return e||T?(0,Oe.jsx)(Be.Primitive.div,{"aria-hidden":"true","data-state":n.open?"open":"closed",...t,...(0,De.skdxPart)("tour","backdrop",t.className),ref:d,style:{...n.spotlightStyle,...t.style}}):null});te.displayName="TourBackdrop";var W=c(require("react"),1),$e=require("../utils/composeRefs.cjs"),Ve=require("../utils/part.cjs"),We=require("../utils/presence.cjs"),ze=require("../utils/primitive.cjs");var Fe=require("react/jsx-runtime"),re=W.forwardRef(({forceMount:e,...t},r)=>{let n=o("TourSpotlight"),i=W.useRef(null),d=(0,$e.useComposedRefs)(r,i),T=(0,We.usePresence)(n.open,i);return n.target&&(e||T)?(0,Fe.jsx)(ze.Primitive.div,{"aria-hidden":"true","data-state":n.open?"open":"closed",...t,...(0,Ve.skdxPart)("tour","spotlight",t.className),ref:d,style:{...n.spotlightStyle,...t.style}}):null});re.displayName="TourSpotlight";var z=c(require("react"),1),_e=require("../utils/composeRefs.cjs"),oe=require("../utils/part.cjs"),ne=require("../utils/popper.cjs"),qe=require("../utils/presence.cjs"),Ke=require("../utils/useDismiss.cjs"),Ge=require("../utils/useFocusTrap.cjs");var se=require("react/jsx-runtime"),ie=z.forwardRef(({forceMount:e,onEscapeKeyDown:t,onPointerDownOutside:r,onFocusOutside:n,onInteractOutside:i,side:d,align:T,sideOffset:G=8,...g},J)=>{let p=o("TourContent"),I=(0,_e.useComposedRefs)(J,p.contentRef),P=(0,qe.usePresence)(p.open,p.contentRef),{open:m,step:k,activeStep:y,anchored:Q,contentRef:l,closeOnEscape:M,closeOnInteractOutside:f}=p;return(0,Ge.useFocusTrap)(l,m),z.useEffect(()=>{m&&l.current?.focus({preventScroll:!0})},[m,k,l]),(0,Ke.useDismiss)({enabled:m,onEscapeKeyDown:x=>{t?.(x),!(x.defaultPrevented||!M)&&p.skip()},onInteractOutside:i,onPointerDownOutside:x=>{r?.(x),!(x.defaultPrevented||!f)&&p.skip()},onFocusOutside:n},[l]),e||P?Q?(0,se.jsx)(ne.PopperContent,{component:"tour",role:"dialog","aria-modal":"true","aria-labelledby":p.titleId,"aria-describedby":p.descriptionId,id:p.contentId,tabIndex:-1,"data-state":m?"open":"closed","data-step":k,"data-type":y?.type,side:y?.placement??d,align:y?.align??T,sideOffset:G,...g,...(0,oe.skdxPart)("tour","content",g.className),ref:I}):(0,se.jsx)(ne.PopperContent,{component:"tour",role:"dialog","aria-modal":"true","aria-labelledby":p.titleId,"aria-describedby":p.descriptionId,id:p.contentId,tabIndex:-1,"data-state":m?"open":"closed","data-step":k,"data-type":y?.type,"data-centered":"","data-side":void 0,"data-align":void 0,...g,...(0,oe.skdxPart)("tour","content",g.className),ref:I,style:{position:void 0,left:void 0,top:void 0,transform:void 0,...g.style}}):null});ie.displayName="TourContent";var Je=c(require("react"),1),Qe=require("../utils/part.cjs"),Ue=require("../utils/popper.cjs");var Xe=require("react/jsx-runtime"),ae=Je.forwardRef((e,t)=>o("TourArrow").anchored?(0,Xe.jsx)(Ue.PopperArrow,{...e,...(0,Qe.skdxPart)("tour","arrow",e.className),ref:t}):null);ae.displayName="TourArrow";var Ye=c(require("react"),1),Ze=require("../utils/part.cjs"),je=require("../utils/primitive.cjs");var et=require("react/jsx-runtime"),pe=Ye.forwardRef((e,t)=>{let r=o("TourTitle");return(0,et.jsx)(je.Primitive.h2,{id:r.titleId,...e,...(0,Ze.skdxPart)("tour","title",e.className),ref:t})});pe.displayName="TourTitle";var tt=c(require("react"),1),rt=require("../utils/part.cjs"),ot=require("../utils/primitive.cjs");var nt=require("react/jsx-runtime"),ue=tt.forwardRef((e,t)=>{let r=o("TourDescription");return(0,nt.jsx)(ot.Primitive.p,{id:r.descriptionId,...e,...(0,rt.skdxPart)("tour","description",e.className),ref:t})});ue.displayName="TourDescription";var st=c(require("react"),1),it=require("../utils/part.cjs"),at=require("../utils/primitive.cjs");var pt=require("react/jsx-runtime");function $t(e,t){return`Step ${e+1} of ${t}`}var ce=st.forwardRef(({format:e=$t,children:t,...r},n)=>{let i=o("TourProgressText");return(0,pt.jsx)(at.Primitive.p,{"data-step":i.step,"data-total":i.total,...r,...(0,it.skdxPart)("tour","progress-text",r.className),ref:n,children:t??e(i.step,i.total)})});ce.displayName="TourProgressText";var ut=c(require("react"),1),ct=require("../utils/part.cjs"),F=require("../utils/primitive.cjs");var lt=require("react/jsx-runtime"),le=ut.forwardRef((e,t)=>{let r=o("TourNextTrigger"),n=r.step>=r.total-1;return(0,lt.jsx)(F.Primitive.button,{type:"button","data-last":n?"":void 0,...e,...(0,ct.skdxPart)("tour","next-trigger",e.className),ref:t,onClick:(0,F.composeEventHandlers)(e.onClick,()=>r.next())})});le.displayName="TourNextTrigger";var mt=c(require("react"),1),ft=require("../utils/part.cjs"),_=require("../utils/primitive.cjs");var dt=require("react/jsx-runtime"),me=mt.forwardRef((e,t)=>{let r=o("TourPrevTrigger"),n=e.disabled||r.step===0;return(0,dt.jsx)(_.Primitive.button,{type:"button",...e,disabled:n,"data-disabled":n?"":void 0,...(0,ft.skdxPart)("tour","prev-trigger",e.className),ref:t,onClick:(0,_.composeEventHandlers)(e.onClick,()=>r.prev())})});me.displayName="TourPrevTrigger";var Tt=c(require("react"),1),gt=require("../utils/part.cjs"),q=require("../utils/primitive.cjs");var Pt=require("react/jsx-runtime"),fe=Tt.forwardRef((e,t)=>{let r=o("TourSkipTrigger");return(0,Pt.jsx)(q.Primitive.button,{type:"button",...e,...(0,gt.skdxPart)("tour","skip-trigger",e.className),ref:t,onClick:(0,q.composeEventHandlers)(e.onClick,()=>r.skip())})});fe.displayName="TourSkipTrigger";var xt=c(require("react"),1),Rt=require("../utils/part.cjs"),K=require("../utils/primitive.cjs");var yt=require("react/jsx-runtime"),de=xt.forwardRef((e,t)=>{let r=o("TourCloseTrigger");return(0,yt.jsx)(K.Primitive.button,{type:"button",...e,...(0,Rt.skdxPart)("tour","close-trigger",e.className),ref:t,onClick:(0,K.composeEventHandlers)(e.onClick,()=>r.skip())})});de.displayName="TourCloseTrigger";0&&(module.exports={Tour,TourArrow,TourBackdrop,TourCloseTrigger,TourContent,TourDescription,TourNextTrigger,TourPortal,TourPrevTrigger,TourProgressText,TourSkipTrigger,TourSpotlight,TourTitle,TourTrigger});
+"use strict";var or=Object.create;var _=Object.defineProperty;var nr=Object.getOwnPropertyDescriptor;var sr=Object.getOwnPropertyNames;var ir=Object.getPrototypeOf,ar=Object.prototype.hasOwnProperty;var ur=(e,t)=>{for(var r in t)_(e,r,{get:t[r],enumerable:!0})},Be=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of sr(t))!ar.call(e,n)&&n!==r&&_(e,n,{get:()=>t[n],enumerable:!(o=nr(t,n))||o.enumerable});return e};var l=(e,t,r)=>(r=e!=null?or(ir(e)):{},Be(t||!e||!e.__esModule?_(r,"default",{value:e,enumerable:!0}):r,e)),pr=e=>Be(_({},"__esModule",{value:!0}),e);var gr={};ur(gr,{Tour:()=>Se,TourActions:()=>q,TourArrow:()=>Ft,TourBackdrop:()=>J,TourCloseTrigger:()=>U,TourContent:()=>Y,TourDescription:()=>j,TourNextTrigger:()=>te,TourPortal:()=>re,TourPrevTrigger:()=>ne,TourProgressText:()=>se,TourProvider:()=>It,TourSkipTrigger:()=>ae,TourSpotlight:()=>pe,TourTitle:()=>le,TourTrigger:()=>Bt,useTourContext:()=>s});module.exports=pr(gr);var i=l(require("react"),1),N=require("../utils/clamp.cjs"),Ht=require("../utils/createContext.cjs"),Dt=require("../utils/liveAnnouncer.cjs"),me=require("../utils/popper.cjs"),k=require("../utils/useCallbackRef.cjs"),be=require("../utils/useControllableState.cjs"),Lt=require("../utils/useOpenChangeComplete.cjs");var Oe=l(require("react"),1),Ke=require("../utils/part.cjs"),$e=require("../utils/primitive.cjs"),Ve=require("react/jsx-runtime"),q=Oe.forwardRef((e,t)=>(0,Ve.jsx)($e.Primitive.div,{...e,...(0,Ke.skdxPart)("tour","actions",e.className),ref:t}));q.displayName="TourActions";var G=l(require("react"),1),Fe=require("../utils/composeRefs.cjs"),We=require("../utils/part.cjs"),ze=require("../utils/presence.cjs"),_e=require("../utils/primitive.cjs");var qe=require("react/jsx-runtime"),J=G.forwardRef(({forceMount:e,...t},r)=>{let o=s("TourBackdrop"),n=G.useRef(null),f=(0,Fe.useComposedRefs)(r,n),g=(0,ze.usePresence)(o.open,n);return o.hasBackdrop&&(e||g)?(0,qe.jsx)(_e.Primitive.div,{"aria-hidden":"true","data-state":o.open?"open":"closed",...t,...(0,We.skdxPart)("tour","backdrop",t.className),ref:f,style:{...o.spotlightStyle,...t.style}}):null});J.displayName="TourBackdrop";var Ge=l(require("react"),1),Je=require("../utils/part.cjs"),Q=require("../utils/primitive.cjs");var Qe=require("react/jsx-runtime"),U=Ge.forwardRef((e,t)=>{let r=s("TourCloseTrigger");return(0,Qe.jsx)(Q.Primitive.button,{type:"button",...e,...(0,Je.skdxPart)("tour","close-trigger",e.className),ref:t,onClick:(0,Q.composeEventHandlers)(e.onClick,()=>r.skip())})});U.displayName="TourCloseTrigger";var E=l(require("react"),1),Ue=require("../utils/composeRefs.cjs"),Xe=require("../utils/direction.cjs"),ve=require("../utils/part.cjs"),ke=require("../utils/popper.cjs"),Ye=require("../utils/presence.cjs"),he=require("../utils/primitive.cjs"),Ze=require("../utils/useCallbackRef.cjs"),je=require("../utils/useDismiss.cjs"),X=require("../utils/useFocusTrap.cjs"),et=require("../utils/useOutsideInert.cjs");var Ce=require("react/jsx-runtime");function cr(e){if(!(e instanceof HTMLElement))return!1;if(e.isContentEditable||e.getAttribute("role")==="textbox")return!0;let t=e.localName;return t==="input"||t==="textarea"||t==="select"}var Y=E.forwardRef(({forceMount:e,onEscapeKeyDown:t,onPointerDownOutside:r,onFocusOutside:o,onInteractOutside:n,onOpenAutoFocus:f,onCloseAutoFocus:g,side:de,align:Te,sideOffset:ge=8,...T},xe)=>{let a=s("TourContent"),$=(0,Ue.useComposedRefs)(xe,a.contentRef),x=(0,Ye.usePresence)(a.open,a.contentRef),{open:d,step:P,activeStep:R,anchored:V,contentRef:y,closeOnEscape:Pe,closeOnInteractOutside:Re}=a,D=d&&a.preventInteraction;(0,X.useFocusTrap)(y,d,{onOpenAutoFocus:f,onCloseAutoFocus:g}),(0,et.useOutsideInert)(y,D);let F=(0,Ze.useCallbackRef)(u=>f?.(u)),L=E.useRef(null);E.useEffect(()=>{if(!d){L.current=null;return}let u=L.current;L.current=P,!(u===null||u===P)&&(0,X.autoFocusEvent)("open-auto-focus",F)&&y.current?.focus({preventScroll:!0})},[d,P,y,F]);let I=u=>{if(!a.keyboardNavigation||u.defaultPrevented||u.altKey||u.ctrlKey||u.metaKey||cr(u.target))return;let M=(0,Xe.directionalKey)(u.key,u.currentTarget);if(M==="ArrowRight")a.next();else if(M==="ArrowLeft")a.prev();else return;u.preventDefault()};return(0,je.useDismiss)({enabled:d,onEscapeKeyDown:u=>{t?.(u),!(u.defaultPrevented||!Pe)&&a.skip()},onInteractOutside:n,onPointerDownOutside:u=>{r?.(u),!(u.defaultPrevented||!Re)&&a.skip()},onFocusOutside:o},[y]),e||x?V?(0,Ce.jsx)(ke.PopperContent,{component:"tour",role:"dialog","aria-modal":D?"true":void 0,"aria-labelledby":a.hasTitle?a.titleId:void 0,"aria-describedby":a.hasDescription?a.descriptionId:void 0,id:a.contentId,tabIndex:-1,"data-state":d?"open":"closed","data-step":P,"data-type":R?.type,"data-backdrop":a.hasBackdrop?"":void 0,"data-keyboard-navigation":a.keyboardNavigation?"":void 0,side:R?.placement??de,align:R?.align??Te,sideOffset:ge,...T,...(0,ve.skdxPart)("tour","content",T.className),ref:$,onKeyDown:(0,he.composeEventHandlers)(T.onKeyDown,I)}):(0,Ce.jsx)(ke.PopperContent,{component:"tour",role:"dialog","aria-modal":D?"true":void 0,"aria-labelledby":a.hasTitle?a.titleId:void 0,"aria-describedby":a.hasDescription?a.descriptionId:void 0,id:a.contentId,tabIndex:-1,"data-state":d?"open":"closed","data-step":P,"data-type":R?.type,"data-backdrop":a.hasBackdrop?"":void 0,"data-keyboard-navigation":a.keyboardNavigation?"":void 0,"data-centered":"","data-side":void 0,"data-align":void 0,...T,...(0,ve.skdxPart)("tour","content",T.className),ref:$,onKeyDown:(0,he.composeEventHandlers)(T.onKeyDown,I),style:{position:void 0,left:void 0,top:void 0,transform:void 0,...T.style}}):null});Y.displayName="TourContent";var Z=l(require("react"),1),tt=require("../utils/part.cjs"),rt=require("../utils/primitive.cjs");var ot=require("react/jsx-runtime"),j=Z.forwardRef((e,t)=>{let r=s("TourDescription"),{setHasDescription:o}=r;return Z.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,ot.jsx)(rt.Primitive.p,{id:r.descriptionId,...e,...(0,tt.skdxPart)("tour","description",e.className),ref:t})});j.displayName="TourDescription";var nt=l(require("react"),1),st=require("../utils/part.cjs"),ee=require("../utils/primitive.cjs");var it=require("react/jsx-runtime"),te=nt.forwardRef((e,t)=>{let r=s("TourNextTrigger"),o=r.step>=r.total-1;return(0,it.jsx)(ee.Primitive.button,{type:"button","data-last":o?"":void 0,...e,...(0,st.skdxPart)("tour","next-trigger",e.className),ref:t,onClick:(0,ee.composeEventHandlers)(e.onClick,()=>r.next())})});te.displayName="TourNextTrigger";var at=require("../utils/portal.cjs"),ut=require("../utils/presence.cjs");var pt=require("react/jsx-runtime"),re=({forceMount:e,children:t,...r})=>{let o=s("TourPortal"),n=(0,ut.usePresence)(o.open,o.contentRef);return e||n?(0,pt.jsx)(at.Portal,{...r,children:t}):null};re.displayName="TourPortal";var ct=l(require("react"),1),lt=require("../utils/part.cjs"),oe=require("../utils/primitive.cjs");var mt=require("react/jsx-runtime"),ne=ct.forwardRef((e,t)=>{let r=s("TourPrevTrigger"),o=e.disabled||r.step===0;return(0,mt.jsx)(oe.Primitive.button,{type:"button",...e,disabled:o,"data-disabled":o?"":void 0,...(0,lt.skdxPart)("tour","prev-trigger",e.className),ref:t,onClick:(0,oe.composeEventHandlers)(e.onClick,()=>r.prev())})});ne.displayName="TourPrevTrigger";var ft=l(require("react"),1),dt=require("../utils/part.cjs"),Tt=require("../utils/primitive.cjs");var gt=require("react/jsx-runtime");function lr(e,t){return`Step ${e+1} of ${t}`}var se=ft.forwardRef(({format:e=lr,children:t,...r},o)=>{let n=s("TourProgressText");return(0,gt.jsx)(Tt.Primitive.p,{"data-step":n.step,"data-total":n.total,...r,...(0,dt.skdxPart)("tour","progress-text",r.className),ref:o,children:t??e(n.step,n.total)})});se.displayName="TourProgressText";var xt=l(require("react"),1),Pt=require("../utils/part.cjs"),ie=require("../utils/primitive.cjs");var Rt=require("react/jsx-runtime"),ae=xt.forwardRef((e,t)=>{let r=s("TourSkipTrigger");return(0,Rt.jsx)(ie.Primitive.button,{type:"button",...e,...(0,Pt.skdxPart)("tour","skip-trigger",e.className),ref:t,onClick:(0,ie.composeEventHandlers)(e.onClick,()=>r.skip())})});ae.displayName="TourSkipTrigger";var ue=l(require("react"),1),yt=require("../utils/composeRefs.cjs"),vt=require("../utils/part.cjs"),kt=require("../utils/presence.cjs"),ht=require("../utils/primitive.cjs");var Ct=require("react/jsx-runtime"),pe=ue.forwardRef(({forceMount:e,...t},r)=>{let o=s("TourSpotlight"),n=ue.useRef(null),f=(0,yt.useComposedRefs)(r,n),g=(0,kt.usePresence)(o.open,n);return o.target&&(e||g)?(0,Ct.jsx)(ht.Primitive.div,{"aria-hidden":"true","data-state":o.open?"open":"closed",...t,...(0,vt.skdxPart)("tour","spotlight",t.className),ref:f,style:{...o.spotlightStyle,...t.style}}):null});pe.displayName="TourSpotlight";var ce=l(require("react"),1),bt=require("../utils/part.cjs"),St=require("../utils/primitive.cjs");var wt=require("react/jsx-runtime"),le=ce.forwardRef((e,t)=>{let r=s("TourTitle"),{setHasTitle:o}=r;return ce.useEffect(()=>(o(!0),()=>o(!1)),[o]),(0,wt.jsx)(St.Primitive.h2,{id:r.titleId,...e,...(0,bt.skdxPart)("tour","title",e.className),ref:t})});le.displayName="TourTitle";var m=require("react/jsx-runtime"),Et=({showProgress:e,showSkip:t,spotlight:r,passThrough:o})=>{let n=s("Tour"),f=n.step>=n.total-1;return(0,m.jsxs)(re,{children:[(0,m.jsx)(J,{}),r?(0,m.jsx)(pe,{}):null,(0,m.jsxs)(Y,{...o,children:[n.activeStep?.title?(0,m.jsx)(le,{children:n.activeStep.title}):null,n.activeStep?.description?(0,m.jsx)(j,{children:n.activeStep.description}):null,e?(0,m.jsx)(se,{}):null,(0,m.jsxs)(q,{children:[(0,m.jsx)(ne,{children:"Back"}),(0,m.jsx)(te,{children:f?"Done":"Next"}),t?(0,m.jsx)(ae,{children:"Skip"}):null]}),(0,m.jsx)(U,{"aria-label":"Close tour",children:"\u2715"})]})]})};var H=require("react/jsx-runtime"),[It,s]=(0,Ht.createSafeContext)("Tour"),mr=50;function fr(e,t,r){return[e.title,`Step ${t+1} of ${r}`].filter(Boolean).join(", ")}function Nt(e){return e?typeof e=="string"?document.querySelector(e):e.current:null}function dr({target:e}){let{setAnchor:t}=(0,me.usePopperContext)("TourAnchor");return i.useEffect(()=>{t(e)},[e,t]),null}function Tr(e,t){if(t===!1)return;let r=t===!0||t===void 0?{block:"center",inline:"center"}:t,o=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;e.scrollIntoView?.(o?{...r,behavior:"auto"}:r)}function Se({children:e,steps:t,open:r,defaultOpen:o=!1,onOpenChange:n,onOpenChangeComplete:f,step:g,defaultStep:de=0,onStepChange:Te,onComplete:ge,onSkip:T,closeOnEscape:xe=!0,closeOnInteractOutside:a=!1,preventInteraction:$=!1,spotlightPadding:x=8,spotlightRadius:d=0,keyboardNavigation:P=!1,scrollIntoView:R,targetTimeout:V=2e3,onStepTargetMissing:y,getAnnouncement:Pe,showProgress:Re=!0,showSkip:D=!0,spotlight:F=!0,...L}){let I=i.useRef(null),[u,M]=i.useState(null),[h,zt]=i.useState(null),A=i.useRef(t),[C=!1,_t]=(0,be.useControllableState)({prop:r,defaultProp:o,onChange:n}),qt=(0,k.useCallbackRef)(p=>Te?.(p,A.current[p]?.id)),[c=0,we]=(0,be.useControllableState)({prop:g,defaultProp:de,onChange:qt});(0,Lt.useOpenChangeComplete)(C,I,f);let b=t.length,B=_t,Ee=(0,k.useCallbackRef)(ge),Ne=(0,k.useCallbackRef)(T),He=(0,k.useCallbackRef)(y),De=(0,k.useCallbackRef)(Pe??fr),Le=i.useRef(R);i.useEffect(()=>{A.current=t,Le.current=R});let Gt=i.useId(),Jt=i.useId(),[Qt,Ut]=i.useState(!1),[Xt,Yt]=i.useState(!1),S=i.useCallback(p=>we((0,N.clamp)(p,0,Math.max(b-1,0))),[we,b]),ye=i.useCallback(()=>{B(!1),Ee()},[B,Ee]),Ie=i.useCallback(()=>{B(!1),Ne()},[B,Ne]),Zt=i.useCallback(()=>{c>=b-1?ye():S(c+1)},[c,b,ye,S]),jt=i.useCallback(()=>S(c-1),[S,c]),Me=(0,k.useCallbackRef)(()=>{c>=b-1?Ie():S(c+1)}),W=t[c],v=W?.target,[er,tr]=i.useState(v);er!==v&&(tr(v),M(null)),i.useEffect(()=>{if(!C||!v)return;let p=K=>{Tr(K,Le.current),M(K)},O=Nt(v);if(O){p(O);return}let z=Date.now(),w=setInterval(()=>{let K=Nt(v);if(K){clearInterval(w),p(K);return}Date.now()-z<V||(clearInterval(w),He(c,A.current[c]),Me())},mr);return()=>clearInterval(w)},[C,c,v,V,He,Me]),i.useEffect(()=>{let p=()=>zt(u?.getBoundingClientRect()??null);if(p(),!!u)return window.addEventListener("scroll",p,!0),window.addEventListener("resize",p),()=>{window.removeEventListener("scroll",p,!0),window.removeEventListener("resize",p)}},[u]),i.useEffect(()=>{if(!C)return;let p=A.current[c];p&&(0,Dt.announce)(De(p,c,A.current.length))},[C,c,De]);let rr=i.useMemo(()=>{if(!h)return{};let p=window.innerWidth,O=window.innerHeight,z=(0,N.clamp)(h.left-x,0,p),w=(0,N.clamp)(h.top-x,0,O);return{"--skdx-tour-x":`${z}px`,"--skdx-tour-y":`${w}px`,"--skdx-tour-width":`${(0,N.clamp)(h.width+x*2,0,p-z)}px`,"--skdx-tour-height":`${(0,N.clamp)(h.height+x*2,0,O-w)}px`,"--skdx-tour-radius":`${d}px`}},[h,x,d]),Ae=u!==null&&W?.type!=="dialog";return(0,H.jsxs)(me.PopperRoot,{children:[(0,H.jsx)(dr,{target:Ae?u:null}),(0,H.jsx)(It,{steps:t,step:c,total:b,activeStep:W,open:C,anchored:Ae,hasBackdrop:W?.backdrop!==!1,keyboardNavigation:P,target:u,spotlightStyle:rr,contentRef:I,contentId:i.useId(),titleId:Gt,descriptionId:Jt,hasTitle:Qt,setHasTitle:Ut,hasDescription:Xt,setHasDescription:Yt,closeOnEscape:xe,closeOnInteractOutside:a,preventInteraction:$,setOpen:B,goTo:S,next:Zt,prev:jt,skip:Ie,complete:ye,children:e??(0,H.jsx)(Et,{showProgress:Re,showSkip:D,spotlight:F,passThrough:L})})]})}Se.displayName="Tour";var Mt=l(require("react"),1),At=require("../utils/part.cjs"),fe=require("../utils/primitive.cjs");var Ot=require("react/jsx-runtime"),Bt=Mt.forwardRef((e,t)=>{let r=s("TourTrigger");return(0,Ot.jsx)(fe.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed",...e,...(0,At.skdxPart)("tour","trigger",e.className),ref:t,onClick:(0,fe.composeEventHandlers)(e.onClick,()=>r.setOpen(!0))})});Bt.displayName="TourTrigger";var Kt=l(require("react"),1),$t=require("../utils/part.cjs"),Vt=require("../utils/popper.cjs");var Wt=require("react/jsx-runtime"),Ft=Kt.forwardRef((e,t)=>s("TourArrow").anchored?(0,Wt.jsx)(Vt.PopperArrow,{...e,...(0,$t.skdxPart)("tour","arrow",e.className),ref:t}):null);Ft.displayName="TourArrow";0&&(module.exports={Tour,TourActions,TourArrow,TourBackdrop,TourCloseTrigger,TourContent,TourDescription,TourNextTrigger,TourPortal,TourPrevTrigger,TourProgressText,TourProvider,TourSkipTrigger,TourSpotlight,TourTitle,TourTrigger,useTourContext});

package/dist/tour/Tour.d.cts

@@ -7,52 +7,14 @@ export declare const TourProvider: {
     displayName: string;
 }, useTourContext: (consumerName: string) => TourContextValue;
 /**
- * Root of a stepped product tour: owns the running state, the active step
- * index, the step list, target resolution and the spotlight geometry, and
- * hands them down to `TourTrigger` / `TourPortal` / `TourBackdrop` /
- * `TourSpotlight` / `TourContent` and the navigation triggers via context.
- * Renders no DOM element itself.
- *
- * Steps are **data**: each declares the element it points at (a selector or a
- * ref), optionally a `placement`, a `title` for the announcement, and a
- * `type`. A step with no target renders centred, which is how a tour usually
- * opens and closes.
- *
- * A target that has not mounted yet is polled for up to `targetTimeout`; on
- * timeout `onStepTargetMissing` fires and the tour skips forward rather than
- * showing a popup anchored to nothing. A target that is found is scrolled into
- * view before it is measured.
- *
- * Works controlled (`open`/`step` + `onOpenChange`/`onStepChange`) or
- * uncontrolled (`defaultOpen`/`defaultStep`).
- *
- * @example
- * ```tsx
- * <Tour
- *   steps={[
- *     { title: 'Welcome' },
- *     { target: '#inbox', title: 'Your inbox', placement: 'right' },
- *     { title: 'All set' },
- *   ]}
- *   onComplete={() => localStorage.setItem('tour-seen', '1')}
- * >
- *   <TourTrigger>Take the tour</TourTrigger>
- *   <TourPortal>
- *     <TourBackdrop />
- *     <TourSpotlight />
- *     <TourContent>
- *       <TourTitle>Your inbox</TourTitle>
- *       <TourDescription>Everything lands here first.</TourDescription>
- *       <TourProgressText />
- *       <TourPrevTrigger>Back</TourPrevTrigger>
- *       <TourNextTrigger>Next</TourNextTrigger>
- *       <TourSkipTrigger>Skip</TourSkipTrigger>
- *     </TourContent>
- *   </TourPortal>
- * </Tour>
- * ```
+ * Root of stepped product tour: owns state, step index, target resolution and spotlight geometry.
+ * Derives portal, backdrop, spotlight and content from `steps` and related props, or renders children.
+ * Steps are data (selector, placement, title, type). Polled for unresolved targets up to `targetTimeout`.
+ * Works controlled (`open`/`step` + callbacks) or uncontrolled (`defaultOpen`/`defaultStep`).
+ * @example `<Tour steps={[{ title: 'Welcome' }, { target: '#inbox', title: 'Your inbox' }]} onComplete={() => localStorage.setItem('tour-seen', '1')} />`
+ * @example Full manual composition from `@skdx/react/primitives/tour` for unrestricted control.
  */
-export declare function Tour({ children, steps, open: openProp, defaultOpen, onOpenChange, step: stepProp, defaultStep, onStepChange, onComplete, onSkip, closeOnEscape, closeOnInteractOutside, spotlightPadding, targetTimeout, onStepTargetMissing, getAnnouncement, }: TourProps): React.JSX.Element;
+export declare function Tour({ children, steps, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, step: stepProp, defaultStep, onStepChange, onComplete, onSkip, closeOnEscape, closeOnInteractOutside, preventInteraction, spotlightPadding, spotlightRadius, keyboardNavigation, scrollIntoView, targetTimeout, onStepTargetMissing, getAnnouncement, showProgress, showSkip, spotlight, ...passThrough }: TourProps): React.JSX.Element;
 export declare namespace Tour {
     var displayName: string;
 }

package/dist/tour/Tour.d.ts

@@ -7,52 +7,14 @@ export declare const TourProvider: {
     displayName: string;
 }, useTourContext: (consumerName: string) => TourContextValue;
 /**
- * Root of a stepped product tour: owns the running state, the active step
- * index, the step list, target resolution and the spotlight geometry, and
- * hands them down to `TourTrigger` / `TourPortal` / `TourBackdrop` /
- * `TourSpotlight` / `TourContent` and the navigation triggers via context.
- * Renders no DOM element itself.
- *
- * Steps are **data**: each declares the element it points at (a selector or a
- * ref), optionally a `placement`, a `title` for the announcement, and a
- * `type`. A step with no target renders centred, which is how a tour usually
- * opens and closes.
- *
- * A target that has not mounted yet is polled for up to `targetTimeout`; on
- * timeout `onStepTargetMissing` fires and the tour skips forward rather than
- * showing a popup anchored to nothing. A target that is found is scrolled into
- * view before it is measured.
- *
- * Works controlled (`open`/`step` + `onOpenChange`/`onStepChange`) or
- * uncontrolled (`defaultOpen`/`defaultStep`).
- *
- * @example
- * ```tsx
- * <Tour
- *   steps={[
- *     { title: 'Welcome' },
- *     { target: '#inbox', title: 'Your inbox', placement: 'right' },
- *     { title: 'All set' },
- *   ]}
- *   onComplete={() => localStorage.setItem('tour-seen', '1')}
- * >
- *   <TourTrigger>Take the tour</TourTrigger>
- *   <TourPortal>
- *     <TourBackdrop />
- *     <TourSpotlight />
- *     <TourContent>
- *       <TourTitle>Your inbox</TourTitle>
- *       <TourDescription>Everything lands here first.</TourDescription>
- *       <TourProgressText />
- *       <TourPrevTrigger>Back</TourPrevTrigger>
- *       <TourNextTrigger>Next</TourNextTrigger>
- *       <TourSkipTrigger>Skip</TourSkipTrigger>
- *     </TourContent>
- *   </TourPortal>
- * </Tour>
- * ```
+ * Root of stepped product tour: owns state, step index, target resolution and spotlight geometry.
+ * Derives portal, backdrop, spotlight and content from `steps` and related props, or renders children.
+ * Steps are data (selector, placement, title, type). Polled for unresolved targets up to `targetTimeout`.
+ * Works controlled (`open`/`step` + callbacks) or uncontrolled (`defaultOpen`/`defaultStep`).
+ * @example `<Tour steps={[{ title: 'Welcome' }, { target: '#inbox', title: 'Your inbox' }]} onComplete={() => localStorage.setItem('tour-seen', '1')} />`
+ * @example Full manual composition from `@skdx/react/primitives/tour` for unrestricted control.
  */
-export declare function Tour({ children, steps, open: openProp, defaultOpen, onOpenChange, step: stepProp, defaultStep, onStepChange, onComplete, onSkip, closeOnEscape, closeOnInteractOutside, spotlightPadding, targetTimeout, onStepTargetMissing, getAnnouncement, }: TourProps): React.JSX.Element;
+export declare function Tour({ children, steps, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, step: stepProp, defaultStep, onStepChange, onComplete, onSkip, closeOnEscape, closeOnInteractOutside, preventInteraction, spotlightPadding, spotlightRadius, keyboardNavigation, scrollIntoView, targetTimeout, onStepTargetMissing, getAnnouncement, showProgress, showSkip, spotlight, ...passThrough }: TourProps): React.JSX.Element;
 export declare namespace Tour {
     var displayName: string;
 }

package/dist/tour/Tour.js

@@ -1 +1 @@
-import*as n from"react";import{clamp as E}from"../utils/clamp.js";import{createSafeContext as Le}from"../utils/createContext.js";import{announce as Ie}from"../utils/liveAnnouncer.js";import{PopperRoot as Me,usePopperContext as De}from"../utils/popper.js";import{useCallbackRef as N}from"../utils/useCallbackRef.js";import{useControllableState as X}from"../utils/useControllableState.js";import{jsx as Z,jsxs as Ve}from"react/jsx-runtime";var[Ae,o]=Le("Tour"),Be=50;function Oe(e,t,r){return[e.title,`Step ${t+1} of ${r}`].filter(Boolean).join(", ")}function Y(e){return e?typeof e=="string"?document.querySelector(e):e.current:null}function $e({target:e}){let{setAnchor:t}=De("TourAnchor");return n.useEffect(()=>{t(e)},[e,t]),null}function j({children:e,steps:t,open:r,defaultOpen:s=!1,onOpenChange:i,step:f,defaultStep:d=0,onStepChange:O,onComplete:T,onSkip:$,closeOnEscape:p=!0,closeOnInteractOutside:H=!1,spotlightPadding:g=8,targetTimeout:l=2e3,onStepTargetMissing:h,getAnnouncement:R}){let V=n.useRef(null),[c,L]=n.useState(null),[m,P]=n.useState(null),[v=!1,Se]=X({prop:r,defaultProp:s,onChange:i}),[u=0,F]=X({prop:f,defaultProp:d,onChange:O}),C=t.length,k=Se,_=N(T),q=N($),K=N(h),G=N(R??Oe),I=n.useRef(t);n.useEffect(()=>{I.current=t});let S=n.useCallback(a=>F(E(a,0,Math.max(C-1,0))),[F,C]),W=n.useCallback(()=>{k(!1),_()},[k,_]),we=n.useCallback(()=>{k(!1),q()},[k,q]),J=n.useCallback(()=>{u>=C-1?W():S(u+1)},[u,C,W,S]),be=n.useCallback(()=>S(u-1),[S,u]),Q=N(J),z=t[u],x=z?.target,[Ee,Ne]=n.useState(x);Ee!==x&&(Ne(x),L(null)),n.useEffect(()=>{if(!v||!x)return;let a=b=>{b.scrollIntoView?.({block:"center",inline:"center"}),L(b)},w=Y(x);if(w){a(w);return}let M=Date.now(),y=setInterval(()=>{let b=Y(x);if(b){clearInterval(y),a(b);return}Date.now()-M<l||(clearInterval(y),K(u,I.current[u]),Q())},Be);return()=>clearInterval(y)},[v,u,x,l,K,Q]),n.useEffect(()=>{let a=()=>P(c?.getBoundingClientRect()??null);if(a(),!!c)return window.addEventListener("scroll",a,!0),window.addEventListener("resize",a),()=>{window.removeEventListener("scroll",a,!0),window.removeEventListener("resize",a)}},[c]),n.useEffect(()=>{if(!v)return;let a=I.current[u];a&&Ie(G(a,u,I.current.length))},[v,u,G]);let He=n.useMemo(()=>{if(!m)return{};let a=window.innerWidth,w=window.innerHeight,M=E(m.left-g,0,a),y=E(m.top-g,0,w);return{"--skdx-tour-x":`${M}px`,"--skdx-tour-y":`${y}px`,"--skdx-tour-width":`${E(m.width+g*2,0,a-M)}px`,"--skdx-tour-height":`${E(m.height+g*2,0,w-y)}px`}},[m,g]),U=c!==null&&z?.type!=="dialog";return Ve(Me,{children:[Z($e,{target:U?c:null}),Z(Ae,{steps:t,step:u,total:C,activeStep:z,open:v,anchored:U,target:c,spotlightStyle:He,contentRef:V,contentId:n.useId(),titleId:n.useId(),descriptionId:n.useId(),closeOnEscape:p,closeOnInteractOutside:H,setOpen:k,goTo:S,next:J,prev:be,skip:we,complete:W,children:e})]})}j.displayName="Tour";import*as ee from"react";import{skdxPart as We}from"../utils/part.js";import{composeEventHandlers as ze,Primitive as Fe}from"../utils/primitive.js";import{jsx as _e}from"react/jsx-runtime";var te=ee.forwardRef((e,t)=>{let r=o("TourTrigger");return _e(Fe.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed",...e,...We("tour","trigger",e.className),ref:t,onClick:ze(e.onClick,()=>r.setOpen(!0))})});te.displayName="TourTrigger";import{Portal as qe}from"../utils/portal.js";import{usePresence as Ke}from"../utils/presence.js";import{jsx as Ge}from"react/jsx-runtime";var re=({forceMount:e,children:t,...r})=>{let s=o("TourPortal"),i=Ke(s.open,s.contentRef);return e||i?Ge(qe,{...r,children:t}):null};re.displayName="TourPortal";import*as D from"react";import{useComposedRefs as Je}from"../utils/composeRefs.js";import{skdxPart as Qe}from"../utils/part.js";import{usePresence as Ue}from"../utils/presence.js";import{Primitive as Xe}from"../utils/primitive.js";import{jsx as Ye}from"react/jsx-runtime";var oe=D.forwardRef(({forceMount:e,...t},r)=>{let s=o("TourBackdrop"),i=D.useRef(null),f=Je(r,i),d=Ue(s.open,i);return e||d?Ye(Xe.div,{"aria-hidden":"true","data-state":s.open?"open":"closed",...t,...Qe("tour","backdrop",t.className),ref:f,style:{...s.spotlightStyle,...t.style}}):null});oe.displayName="TourBackdrop";import*as A from"react";import{useComposedRefs as Ze}from"../utils/composeRefs.js";import{skdxPart as je}from"../utils/part.js";import{usePresence as et}from"../utils/presence.js";import{Primitive as tt}from"../utils/primitive.js";import{jsx as rt}from"react/jsx-runtime";var ne=A.forwardRef(({forceMount:e,...t},r)=>{let s=o("TourSpotlight"),i=A.useRef(null),f=Ze(r,i),d=et(s.open,i);return s.target&&(e||d)?rt(tt.div,{"aria-hidden":"true","data-state":s.open?"open":"closed",...t,...je("tour","spotlight",t.className),ref:f,style:{...s.spotlightStyle,...t.style}}):null});ne.displayName="TourSpotlight";import*as B from"react";import{useComposedRefs as ot}from"../utils/composeRefs.js";import{skdxPart as se}from"../utils/part.js";import{PopperContent as ie}from"../utils/popper.js";import{usePresence as nt}from"../utils/presence.js";import{useDismiss as st}from"../utils/useDismiss.js";import{useFocusTrap as it}from"../utils/useFocusTrap.js";import{jsx as ae}from"react/jsx-runtime";var pe=B.forwardRef(({forceMount:e,onEscapeKeyDown:t,onPointerDownOutside:r,onFocusOutside:s,onInteractOutside:i,side:f,align:d,sideOffset:O=8,...T},$)=>{let p=o("TourContent"),H=ot($,p.contentRef),g=nt(p.open,p.contentRef),{open:l,step:h,activeStep:R,anchored:V,contentRef:c,closeOnEscape:L,closeOnInteractOutside:m}=p;return it(c,l),B.useEffect(()=>{l&&c.current?.focus({preventScroll:!0})},[l,h,c]),st({enabled:l,onEscapeKeyDown:P=>{t?.(P),!(P.defaultPrevented||!L)&&p.skip()},onInteractOutside:i,onPointerDownOutside:P=>{r?.(P),!(P.defaultPrevented||!m)&&p.skip()},onFocusOutside:s},[c]),e||g?V?ae(ie,{component:"tour",role:"dialog","aria-modal":"true","aria-labelledby":p.titleId,"aria-describedby":p.descriptionId,id:p.contentId,tabIndex:-1,"data-state":l?"open":"closed","data-step":h,"data-type":R?.type,side:R?.placement??f,align:R?.align??d,sideOffset:O,...T,...se("tour","content",T.className),ref:H}):ae(ie,{component:"tour",role:"dialog","aria-modal":"true","aria-labelledby":p.titleId,"aria-describedby":p.descriptionId,id:p.contentId,tabIndex:-1,"data-state":l?"open":"closed","data-step":h,"data-type":R?.type,"data-centered":"","data-side":void 0,"data-align":void 0,...T,...se("tour","content",T.className),ref:H,style:{position:void 0,left:void 0,top:void 0,transform:void 0,...T.style}}):null});pe.displayName="TourContent";import*as ue from"react";import{skdxPart as at}from"../utils/part.js";import{PopperArrow as pt}from"../utils/popper.js";import{jsx as ut}from"react/jsx-runtime";var ce=ue.forwardRef((e,t)=>o("TourArrow").anchored?ut(pt,{...e,...at("tour","arrow",e.className),ref:t}):null);ce.displayName="TourArrow";import*as le from"react";import{skdxPart as ct}from"../utils/part.js";import{Primitive as lt}from"../utils/primitive.js";import{jsx as mt}from"react/jsx-runtime";var me=le.forwardRef((e,t)=>{let r=o("TourTitle");return mt(lt.h2,{id:r.titleId,...e,...ct("tour","title",e.className),ref:t})});me.displayName="TourTitle";import*as fe from"react";import{skdxPart as ft}from"../utils/part.js";import{Primitive as dt}from"../utils/primitive.js";import{jsx as Tt}from"react/jsx-runtime";var de=fe.forwardRef((e,t)=>{let r=o("TourDescription");return Tt(dt.p,{id:r.descriptionId,...e,...ft("tour","description",e.className),ref:t})});de.displayName="TourDescription";import*as Te from"react";import{skdxPart as gt}from"../utils/part.js";import{Primitive as Pt}from"../utils/primitive.js";import{jsx as Rt}from"react/jsx-runtime";function xt(e,t){return`Step ${e+1} of ${t}`}var ge=Te.forwardRef(({format:e=xt,children:t,...r},s)=>{let i=o("TourProgressText");return Rt(Pt.p,{"data-step":i.step,"data-total":i.total,...r,...gt("tour","progress-text",r.className),ref:s,children:t??e(i.step,i.total)})});ge.displayName="TourProgressText";import*as Pe from"react";import{skdxPart as yt}from"../utils/part.js";import{composeEventHandlers as ht,Primitive as vt}from"../utils/primitive.js";import{jsx as Ct}from"react/jsx-runtime";var xe=Pe.forwardRef((e,t)=>{let r=o("TourNextTrigger"),s=r.step>=r.total-1;return Ct(vt.button,{type:"button","data-last":s?"":void 0,...e,...yt("tour","next-trigger",e.className),ref:t,onClick:ht(e.onClick,()=>r.next())})});xe.displayName="TourNextTrigger";import*as Re from"react";import{skdxPart as kt}from"../utils/part.js";import{composeEventHandlers as St,Primitive as wt}from"../utils/primitive.js";import{jsx as bt}from"react/jsx-runtime";var ye=Re.forwardRef((e,t)=>{let r=o("TourPrevTrigger"),s=e.disabled||r.step===0;return bt(wt.button,{type:"button",...e,disabled:s,"data-disabled":s?"":void 0,...kt("tour","prev-trigger",e.className),ref:t,onClick:St(e.onClick,()=>r.prev())})});ye.displayName="TourPrevTrigger";import*as he from"react";import{skdxPart as Et}from"../utils/part.js";import{composeEventHandlers as Nt,Primitive as Ht}from"../utils/primitive.js";import{jsx as Lt}from"react/jsx-runtime";var ve=he.forwardRef((e,t)=>{let r=o("TourSkipTrigger");return Lt(Ht.button,{type:"button",...e,...Et("tour","skip-trigger",e.className),ref:t,onClick:Nt(e.onClick,()=>r.skip())})});ve.displayName="TourSkipTrigger";import*as Ce from"react";import{skdxPart as It}from"../utils/part.js";import{composeEventHandlers as Mt,Primitive as Dt}from"../utils/primitive.js";import{jsx as At}from"react/jsx-runtime";var ke=Ce.forwardRef((e,t)=>{let r=o("TourCloseTrigger");return At(Dt.button,{type:"button",...e,...It("tour","close-trigger",e.className),ref:t,onClick:Mt(e.onClick,()=>r.skip())})});ke.displayName="TourCloseTrigger";export{j as Tour,ce as TourArrow,oe as TourBackdrop,ke as TourCloseTrigger,pe as TourContent,de as TourDescription,xe as TourNextTrigger,re as TourPortal,ye as TourPrevTrigger,ge as TourProgressText,ve as TourSkipTrigger,ne as TourSpotlight,me as TourTitle,te as TourTrigger};
+import*as s from"react";import{clamp as B}from"../utils/clamp.js";import{createSafeContext as Ut}from"../utils/createContext.js";import{announce as Xt}from"../utils/liveAnnouncer.js";import{PopperRoot as Yt,usePopperContext as Zt}from"../utils/popper.js";import{useCallbackRef as w}from"../utils/useCallbackRef.js";import{useControllableState as Ie}from"../utils/useControllableState.js";import{useOpenChangeComplete as jt}from"../utils/useOpenChangeComplete.js";import*as ke from"react";import{skdxPart as Ze}from"../utils/part.js";import{Primitive as je}from"../utils/primitive.js";import{jsx as et}from"react/jsx-runtime";var j=ke.forwardRef((e,t)=>et(je.div,{...e,...Ze("tour","actions",e.className),ref:t}));j.displayName="TourActions";import*as W from"react";import{useComposedRefs as tt}from"../utils/composeRefs.js";import{skdxPart as rt}from"../utils/part.js";import{usePresence as ot}from"../utils/presence.js";import{Primitive as nt}from"../utils/primitive.js";import{jsx as st}from"react/jsx-runtime";var ee=W.forwardRef(({forceMount:e,...t},r)=>{let o=n("TourBackdrop"),u=W.useRef(null),l=tt(r,u),T=ot(o.open,u);return o.hasBackdrop&&(e||T)?st(nt.div,{"aria-hidden":"true","data-state":o.open?"open":"closed",...t,...rt("tour","backdrop",t.className),ref:l,style:{...o.spotlightStyle,...t.style}}):null});ee.displayName="TourBackdrop";import*as he from"react";import{skdxPart as it}from"../utils/part.js";import{composeEventHandlers as at,Primitive as ut}from"../utils/primitive.js";import{jsx as pt}from"react/jsx-runtime";var te=he.forwardRef((e,t)=>{let r=n("TourCloseTrigger");return pt(ut.button,{type:"button",...e,...it("tour","close-trigger",e.className),ref:t,onClick:at(e.onClick,()=>r.skip())})});te.displayName="TourCloseTrigger";import*as S from"react";import{useComposedRefs as ct}from"../utils/composeRefs.js";import{directionalKey as lt}from"../utils/direction.js";import{skdxPart as Ce}from"../utils/part.js";import{PopperContent as be}from"../utils/popper.js";import{usePresence as mt}from"../utils/presence.js";import{composeEventHandlers as Se}from"../utils/primitive.js";import{useCallbackRef as ft}from"../utils/useCallbackRef.js";import{useDismiss as dt}from"../utils/useDismiss.js";import{autoFocusEvent as Tt,useFocusTrap as gt}from"../utils/useFocusTrap.js";import{useOutsideInert as xt}from"../utils/useOutsideInert.js";import{jsx as we}from"react/jsx-runtime";function Pt(e){if(!(e instanceof HTMLElement))return!1;if(e.isContentEditable||e.getAttribute("role")==="textbox")return!0;let t=e.localName;return t==="input"||t==="textarea"||t==="select"}var re=S.forwardRef(({forceMount:e,onEscapeKeyDown:t,onPointerDownOutside:r,onFocusOutside:o,onInteractOutside:u,onOpenAutoFocus:l,onCloseAutoFocus:T,side:G,align:J,sideOffset:Q=8,...f},U)=>{let i=n("TourContent"),O=ct(U,i.contentRef),g=mt(i.open,i.contentRef),{open:m,step:x,activeStep:P,anchored:K,contentRef:R,closeOnEscape:X,closeOnInteractOutside:Y}=i,E=m&&i.preventInteraction;gt(R,m,{onOpenAutoFocus:l,onCloseAutoFocus:T}),xt(R,E);let $=ft(a=>l?.(a)),N=S.useRef(null);S.useEffect(()=>{if(!m){N.current=null;return}let a=N.current;N.current=x,!(a===null||a===x)&&Tt("open-auto-focus",$)&&R.current?.focus({preventScroll:!0})},[m,x,R,$]);let H=a=>{if(!i.keyboardNavigation||a.defaultPrevented||a.altKey||a.ctrlKey||a.metaKey||Pt(a.target))return;let D=lt(a.key,a.currentTarget);if(D==="ArrowRight")i.next();else if(D==="ArrowLeft")i.prev();else return;a.preventDefault()};return dt({enabled:m,onEscapeKeyDown:a=>{t?.(a),!(a.defaultPrevented||!X)&&i.skip()},onInteractOutside:u,onPointerDownOutside:a=>{r?.(a),!(a.defaultPrevented||!Y)&&i.skip()},onFocusOutside:o},[R]),e||g?K?we(be,{component:"tour",role:"dialog","aria-modal":E?"true":void 0,"aria-labelledby":i.hasTitle?i.titleId:void 0,"aria-describedby":i.hasDescription?i.descriptionId:void 0,id:i.contentId,tabIndex:-1,"data-state":m?"open":"closed","data-step":x,"data-type":P?.type,"data-backdrop":i.hasBackdrop?"":void 0,"data-keyboard-navigation":i.keyboardNavigation?"":void 0,side:P?.placement??G,align:P?.align??J,sideOffset:Q,...f,...Ce("tour","content",f.className),ref:O,onKeyDown:Se(f.onKeyDown,H)}):we(be,{component:"tour",role:"dialog","aria-modal":E?"true":void 0,"aria-labelledby":i.hasTitle?i.titleId:void 0,"aria-describedby":i.hasDescription?i.descriptionId:void 0,id:i.contentId,tabIndex:-1,"data-state":m?"open":"closed","data-step":x,"data-type":P?.type,"data-backdrop":i.hasBackdrop?"":void 0,"data-keyboard-navigation":i.keyboardNavigation?"":void 0,"data-centered":"","data-side":void 0,"data-align":void 0,...f,...Ce("tour","content",f.className),ref:O,onKeyDown:Se(f.onKeyDown,H),style:{position:void 0,left:void 0,top:void 0,transform:void 0,...f.style}}):null});re.displayName="TourContent";import*as z from"react";import{skdxPart as Rt}from"../utils/part.js";import{Primitive as yt}from"../utils/primitive.js";import{jsx as vt}from"react/jsx-runtime";var oe=z.forwardRef((e,t)=>{let r=n("TourDescription"),{setHasDescription:o}=r;return z.useEffect(()=>(o(!0),()=>o(!1)),[o]),vt(yt.p,{id:r.descriptionId,...e,...Rt("tour","description",e.className),ref:t})});oe.displayName="TourDescription";import*as Ee from"react";import{skdxPart as kt}from"../utils/part.js";import{composeEventHandlers as ht,Primitive as Ct}from"../utils/primitive.js";import{jsx as bt}from"react/jsx-runtime";var ne=Ee.forwardRef((e,t)=>{let r=n("TourNextTrigger"),o=r.step>=r.total-1;return bt(Ct.button,{type:"button","data-last":o?"":void 0,...e,...kt("tour","next-trigger",e.className),ref:t,onClick:ht(e.onClick,()=>r.next())})});ne.displayName="TourNextTrigger";import{Portal as St}from"../utils/portal.js";import{usePresence as wt}from"../utils/presence.js";import{jsx as Et}from"react/jsx-runtime";var se=({forceMount:e,children:t,...r})=>{let o=n("TourPortal"),u=wt(o.open,o.contentRef);return e||u?Et(St,{...r,children:t}):null};se.displayName="TourPortal";import*as Ne from"react";import{skdxPart as Nt}from"../utils/part.js";import{composeEventHandlers as Ht,Primitive as Dt}from"../utils/primitive.js";import{jsx as Lt}from"react/jsx-runtime";var ie=Ne.forwardRef((e,t)=>{let r=n("TourPrevTrigger"),o=e.disabled||r.step===0;return Lt(Dt.button,{type:"button",...e,disabled:o,"data-disabled":o?"":void 0,...Nt("tour","prev-trigger",e.className),ref:t,onClick:Ht(e.onClick,()=>r.prev())})});ie.displayName="TourPrevTrigger";import*as He from"react";import{skdxPart as It}from"../utils/part.js";import{Primitive as Mt}from"../utils/primitive.js";import{jsx as Bt}from"react/jsx-runtime";function At(e,t){return`Step ${e+1} of ${t}`}var ae=He.forwardRef(({format:e=At,children:t,...r},o)=>{let u=n("TourProgressText");return Bt(Mt.p,{"data-step":u.step,"data-total":u.total,...r,...It("tour","progress-text",r.className),ref:o,children:t??e(u.step,u.total)})});ae.displayName="TourProgressText";import*as De from"react";import{skdxPart as Ot}from"../utils/part.js";import{composeEventHandlers as Kt,Primitive as $t}from"../utils/primitive.js";import{jsx as Vt}from"react/jsx-runtime";var ue=De.forwardRef((e,t)=>{let r=n("TourSkipTrigger");return Vt($t.button,{type:"button",...e,...Ot("tour","skip-trigger",e.className),ref:t,onClick:Kt(e.onClick,()=>r.skip())})});ue.displayName="TourSkipTrigger";import*as _ from"react";import{useComposedRefs as Ft}from"../utils/composeRefs.js";import{skdxPart as Wt}from"../utils/part.js";import{usePresence as zt}from"../utils/presence.js";import{Primitive as _t}from"../utils/primitive.js";import{jsx as qt}from"react/jsx-runtime";var pe=_.forwardRef(({forceMount:e,...t},r)=>{let o=n("TourSpotlight"),u=_.useRef(null),l=Ft(r,u),T=zt(o.open,u);return o.target&&(e||T)?qt(_t.div,{"aria-hidden":"true","data-state":o.open?"open":"closed",...t,...Wt("tour","spotlight",t.className),ref:l,style:{...o.spotlightStyle,...t.style}}):null});pe.displayName="TourSpotlight";import*as q from"react";import{skdxPart as Gt}from"../utils/part.js";import{Primitive as Jt}from"../utils/primitive.js";import{jsx as Qt}from"react/jsx-runtime";var ce=q.forwardRef((e,t)=>{let r=n("TourTitle"),{setHasTitle:o}=r;return q.useEffect(()=>(o(!0),()=>o(!1)),[o]),Qt(Jt.h2,{id:r.titleId,...e,...Gt("tour","title",e.className),ref:t})});ce.displayName="TourTitle";import{jsx as d,jsxs as le}from"react/jsx-runtime";var Le=({showProgress:e,showSkip:t,spotlight:r,passThrough:o})=>{let u=n("Tour"),l=u.step>=u.total-1;return le(se,{children:[d(ee,{}),r?d(pe,{}):null,le(re,{...o,children:[u.activeStep?.title?d(ce,{children:u.activeStep.title}):null,u.activeStep?.description?d(oe,{children:u.activeStep.description}):null,e?d(ae,{}):null,le(j,{children:[d(ie,{children:"Back"}),d(ne,{children:l?"Done":"Next"}),t?d(ue,{children:"Skip"}):null]}),d(te,{"aria-label":"Close tour",children:"\u2715"})]})]})};import{jsx as me,jsxs as sr}from"react/jsx-runtime";var[er,n]=Ut("Tour"),tr=50;function rr(e,t,r){return[e.title,`Step ${t+1} of ${r}`].filter(Boolean).join(", ")}function Me(e){return e?typeof e=="string"?document.querySelector(e):e.current:null}function or({target:e}){let{setAnchor:t}=Zt("TourAnchor");return s.useEffect(()=>{t(e)},[e,t]),null}function nr(e,t){if(t===!1)return;let r=t===!0||t===void 0?{block:"center",inline:"center"}:t,o=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1;e.scrollIntoView?.(o?{...r,behavior:"auto"}:r)}function Ae({children:e,steps:t,open:r,defaultOpen:o=!1,onOpenChange:u,onOpenChangeComplete:l,step:T,defaultStep:G=0,onStepChange:J,onComplete:Q,onSkip:f,closeOnEscape:U=!0,closeOnInteractOutside:i=!1,preventInteraction:O=!1,spotlightPadding:g=8,spotlightRadius:m=0,keyboardNavigation:x=!1,scrollIntoView:P,targetTimeout:K=2e3,onStepTargetMissing:R,getAnnouncement:X,showProgress:Y=!0,showSkip:E=!0,spotlight:$=!0,...N}){let H=s.useRef(null),[a,D]=s.useState(null),[v,Ke]=s.useState(null),L=s.useRef(t),[k=!1,$e]=Ie({prop:r,defaultProp:o,onChange:u}),Ve=w(p=>J?.(p,L.current[p]?.id)),[c=0,fe]=Ie({prop:T,defaultProp:G,onChange:Ve});jt(k,H,l);let h=t.length,I=$e,de=w(Q),Te=w(f),ge=w(R),xe=w(X??rr),Pe=s.useRef(P);s.useEffect(()=>{L.current=t,Pe.current=P});let Fe=s.useId(),We=s.useId(),[ze,_e]=s.useState(!1),[qe,Ge]=s.useState(!1),C=s.useCallback(p=>fe(B(p,0,Math.max(h-1,0))),[fe,h]),Z=s.useCallback(()=>{I(!1),de()},[I,de]),Re=s.useCallback(()=>{I(!1),Te()},[I,Te]),Je=s.useCallback(()=>{c>=h-1?Z():C(c+1)},[c,h,Z,C]),Qe=s.useCallback(()=>C(c-1),[C,c]),ye=w(()=>{c>=h-1?Re():C(c+1)}),V=t[c],y=V?.target,[Ue,Xe]=s.useState(y);Ue!==y&&(Xe(y),D(null)),s.useEffect(()=>{if(!k||!y)return;let p=A=>{nr(A,Pe.current),D(A)},M=Me(y);if(M){p(M);return}let F=Date.now(),b=setInterval(()=>{let A=Me(y);if(A){clearInterval(b),p(A);return}Date.now()-F<K||(clearInterval(b),ge(c,L.current[c]),ye())},tr);return()=>clearInterval(b)},[k,c,y,K,ge,ye]),s.useEffect(()=>{let p=()=>Ke(a?.getBoundingClientRect()??null);if(p(),!!a)return window.addEventListener("scroll",p,!0),window.addEventListener("resize",p),()=>{window.removeEventListener("scroll",p,!0),window.removeEventListener("resize",p)}},[a]),s.useEffect(()=>{if(!k)return;let p=L.current[c];p&&Xt(xe(p,c,L.current.length))},[k,c,xe]);let Ye=s.useMemo(()=>{if(!v)return{};let p=window.innerWidth,M=window.innerHeight,F=B(v.left-g,0,p),b=B(v.top-g,0,M);return{"--skdx-tour-x":`${F}px`,"--skdx-tour-y":`${b}px`,"--skdx-tour-width":`${B(v.width+g*2,0,p-F)}px`,"--skdx-tour-height":`${B(v.height+g*2,0,M-b)}px`,"--skdx-tour-radius":`${m}px`}},[v,g,m]),ve=a!==null&&V?.type!=="dialog";return sr(Yt,{children:[me(or,{target:ve?a:null}),me(er,{steps:t,step:c,total:h,activeStep:V,open:k,anchored:ve,hasBackdrop:V?.backdrop!==!1,keyboardNavigation:x,target:a,spotlightStyle:Ye,contentRef:H,contentId:s.useId(),titleId:Fe,descriptionId:We,hasTitle:ze,setHasTitle:_e,hasDescription:qe,setHasDescription:Ge,closeOnEscape:U,closeOnInteractOutside:i,preventInteraction:O,setOpen:I,goTo:C,next:Je,prev:Qe,skip:Re,complete:Z,children:e??me(Le,{showProgress:Y,showSkip:E,spotlight:$,passThrough:N})})]})}Ae.displayName="Tour";import*as Be from"react";import{skdxPart as ir}from"../utils/part.js";import{composeEventHandlers as ar,Primitive as ur}from"../utils/primitive.js";import{jsx as cr}from"react/jsx-runtime";var pr=Be.forwardRef((e,t)=>{let r=n("TourTrigger");return cr(ur.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed",...e,...ir("tour","trigger",e.className),ref:t,onClick:ar(e.onClick,()=>r.setOpen(!0))})});pr.displayName="TourTrigger";import*as Oe from"react";import{skdxPart as lr}from"../utils/part.js";import{PopperArrow as mr}from"../utils/popper.js";import{jsx as dr}from"react/jsx-runtime";var fr=Oe.forwardRef((e,t)=>n("TourArrow").anchored?dr(mr,{...e,...lr("tour","arrow",e.className),ref:t}):null);fr.displayName="TourArrow";export{Ae as Tour,j as TourActions,fr as TourArrow,ee as TourBackdrop,te as TourCloseTrigger,re as TourContent,oe as TourDescription,ne as TourNextTrigger,se as TourPortal,ie as TourPrevTrigger,ae as TourProgressText,er as TourProvider,ue as TourSkipTrigger,pe as TourSpotlight,ce as TourTitle,pr as TourTrigger,n as useTourContext};

package/dist/tour/TourActions.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { TourActionsProps } from './types.cjs';
+/**
+ * Container for tour navigation triggers — no role or label (buttons inside name themselves).
+ *
+ * @example
+ * ```tsx
+ * <TourContent>
+ *   <TourTitle>Your inbox</TourTitle>
+ *   <TourDescription>Everything lands here first.</TourDescription>
+ *   <TourProgressText />
+ *   <TourActions>
+ *     <TourSkipTrigger>Skip</TourSkipTrigger>
+ *     <TourPrevTrigger>Back</TourPrevTrigger>
+ *     <TourNextTrigger>Next</TourNextTrigger>
+ *   </TourActions>
+ * </TourContent>
+ * ```
+ */
+export declare const TourActions: React.ForwardRefExoticComponent<Omit<TourActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tour/TourActions.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { TourActionsProps } from './types.js';
+/**
+ * Container for tour navigation triggers — no role or label (buttons inside name themselves).
+ *
+ * @example
+ * ```tsx
+ * <TourContent>
+ *   <TourTitle>Your inbox</TourTitle>
+ *   <TourDescription>Everything lands here first.</TourDescription>
+ *   <TourProgressText />
+ *   <TourActions>
+ *     <TourSkipTrigger>Skip</TourSkipTrigger>
+ *     <TourPrevTrigger>Back</TourPrevTrigger>
+ *     <TourNextTrigger>Next</TourNextTrigger>
+ *   </TourActions>
+ * </TourContent>
+ * ```
+ */
+export declare const TourActions: React.ForwardRefExoticComponent<Omit<TourActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tour/TourAnatomy.d.cts

@@ -0,0 +1,15 @@
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+/**
+ * The anatomy a {@link Tour} draws from `steps` with no manually-composed
+ * children: portal, backdrop, optional spotlight, and content panel with
+ * title, optional progress line, prev/next/skip triggers, and a close trigger.
+ * Always includes a close trigger to ensure a dismiss affordance.
+ *
+ * @internal
+ */
+export declare const TourAnatomy: ({ showProgress, showSkip, spotlight, passThrough, }: {
+    showProgress?: boolean;
+    showSkip?: boolean;
+    spotlight?: boolean;
+    passThrough?: PassThroughProps;
+}) => import("react").JSX.Element;

package/dist/tour/TourAnatomy.d.ts

@@ -0,0 +1,15 @@
+import type { PassThroughProps } from '../utils/passThrough.js';
+/**
+ * The anatomy a {@link Tour} draws from `steps` with no manually-composed
+ * children: portal, backdrop, optional spotlight, and content panel with
+ * title, optional progress line, prev/next/skip triggers, and a close trigger.
+ * Always includes a close trigger to ensure a dismiss affordance.
+ *
+ * @internal
+ */
+export declare const TourAnatomy: ({ showProgress, showSkip, spotlight, passThrough, }: {
+    showProgress?: boolean;
+    showSkip?: boolean;
+    spotlight?: boolean;
+    passThrough?: PassThroughProps;
+}) => import("react").JSX.Element;

package/dist/tour/TourArrow.d.cts

@@ -1,13 +1,8 @@
 import * as React from 'react';
 import type { TourArrowProps } from './types.cjs';
 /**
- * Optional arrow pointing from `TourContent` back at the step's target,
- * self-positioning on the edge facing it. Must be rendered inside
- * `TourContent`.
- *
- * Renders nothing on a step that is centred — one with no target, or with
- * `type: 'dialog'`. There is nothing for it to point at, and the underlying
- * popper arrow has no positioning context to read on that branch.
+ * Optional arrow pointing from `TourContent` to the target, self-positioning.
+ * Renders nothing on centred steps (`type: 'dialog'` or no target).
  *
  * @example
  * ```tsx

package/dist/tour/TourArrow.d.ts

@@ -1,13 +1,8 @@
 import * as React from 'react';
 import type { TourArrowProps } from './types.js';
 /**
- * Optional arrow pointing from `TourContent` back at the step's target,
- * self-positioning on the edge facing it. Must be rendered inside
- * `TourContent`.
- *
- * Renders nothing on a step that is centred — one with no target, or with
- * `type: 'dialog'`. There is nothing for it to point at, and the underlying
- * popper arrow has no positioning context to read on that branch.
+ * Optional arrow pointing from `TourContent` to the target, self-positioning.
+ * Renders nothing on centred steps (`type: 'dialog'` or no target).
  *
  * @example
  * ```tsx

package/dist/tour/TourBackdrop.d.cts

@@ -13,6 +13,9 @@ import type { TourBackdropProps } from './types.cjs';
  * (`open`/`closed`) for animation and unmounts with the tour unless
  * `forceMount` is set.
  *
+ * A step with `backdrop: false` renders nothing here, even if `forceMount` is
+ * set. `TourContent` carries `data-backdrop` for steps that keep it.
+ *
  * @example
  * ```css
  * .tour-backdrop {

package/dist/tour/TourBackdrop.d.ts

@@ -13,6 +13,9 @@ import type { TourBackdropProps } from './types.js';
  * (`open`/`closed`) for animation and unmounts with the tour unless
  * `forceMount` is set.
  *
+ * A step with `backdrop: false` renders nothing here, even if `forceMount` is
+ * set. `TourContent` carries `data-backdrop` for steps that keep it.
+ *
  * @example
  * ```css
  * .tour-backdrop {

package/dist/tour/TourCloseTrigger.d.cts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import type { TourCloseTriggerProps } from './types.cjs';
 /**
- * The dismiss affordance — the corner ✕. Ends the tour through the same path
- * as `TourSkipTrigger` and Escape: closes it and fires `onSkip`, never
- * `onComplete`. Abandoning a tour is abandoning it, whichever control did it.
- *
- * Distinct from `TourSkipTrigger` only in intent and placement, so give it an
- * `aria-label` — an icon-only button has no accessible name of its own.
+ * The dismiss affordance — the corner ✕. Fires `onSkip`, never `onComplete`.
+ * Icon-only buttons need an `aria-label`.
  *
  * @example
  * ```tsx

package/dist/tour/TourCloseTrigger.d.ts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import type { TourCloseTriggerProps } from './types.js';
 /**
- * The dismiss affordance — the corner ✕. Ends the tour through the same path
- * as `TourSkipTrigger` and Escape: closes it and fires `onSkip`, never
- * `onComplete`. Abandoning a tour is abandoning it, whichever control did it.
- *
- * Distinct from `TourSkipTrigger` only in intent and placement, so give it an
- * `aria-label` — an icon-only button has no accessible name of its own.
+ * The dismiss affordance — the corner ✕. Fires `onSkip`, never `onComplete`.
+ * Icon-only buttons need an `aria-label`.
  *
  * @example
  * ```tsx

package/dist/tour/TourContent.d.cts

@@ -1,34 +1,18 @@
 import * as React from 'react';
 import type { TourContentProps } from './types.cjs';
 /**
- * The active step's panel: `role="dialog"` with `aria-modal="true"`, labelled
- * by `TourTitle` and described by `TourDescription`, and `data-state`
- * (`open`/`closed`) plus `data-step` and `data-type`.
+ * The active step's dialog panel with role="dialog", labelled and described by TourTitle/TourDescription.
  *
- * When the step has a resolved target (and is not `type: 'dialog'`) it is
- * positioned by the shared popper layer against that target, exposing the
- * resolved `data-side`/`data-align` and the `--skdx-tour-available-width` /
- * `-available-height` / `-trigger-width` / `-transform-origin` measurement
- * properties. A step with no target — or an explicit `type: 'dialog'` — gets
- * `data-centered` instead, with **no** inline positioning and no
- * `data-side`/`data-align` at all, so CSS is free to place it in the middle of
- * the viewport. The active step's `placement`/`align` override this
- * component's own `side`/`align`, which act as the tour-wide defaults.
+ * `aria-modal="true"` is set only when `preventInteraction` is true; both barrier and claim ship together.
  *
- * Both branches render the same element, deliberately: a step change that
- * remounted the panel would strand the focus trap's listener on the old node.
+ * Focus is trapped and moved onto the panel at each step change (announced as `onOpenAutoFocus`).
+ * On tour end, focus returns to its pre-tour position, announced as `onCloseAutoFocus`.
+ * Either event is vetoable via `preventDefault()`.
  *
- * Focus is trapped inside while the tour runs, moves onto the panel on **each
- * step change** (not just on open — a step change that only swaps text is
- * invisible to a screen reader otherwise), and is restored to whatever was
- * focused before the tour started when it completes or is skipped.
+ * Escape skips the tour if `closeOnEscape`; pointer-down outside skips if `closeOnInteractOutside`.
+ * Both fire before dismissal and are vetoable.
  *
- * Escape skips the tour when `closeOnEscape`; a pointer-down outside skips it
- * only when `closeOnInteractOutside`. Both are reported first — via
- * `onEscapeKeyDown` and `onPointerDownOutside`/`onInteractOutside` — and
- * `event.preventDefault()` on any of them keeps the tour running. Arrow keys
- * are deliberately **not** handled: they belong to whatever the step is
- * pointing at.
+ * Arrow keys (ArrowRight/ArrowLeft) navigate only when root sets `keyboardNavigation`; disabled within text fields.
  *
  * @example
  * ```tsx

package/dist/tour/TourContent.d.ts

@@ -1,34 +1,18 @@
 import * as React from 'react';
 import type { TourContentProps } from './types.js';
 /**
- * The active step's panel: `role="dialog"` with `aria-modal="true"`, labelled
- * by `TourTitle` and described by `TourDescription`, and `data-state`
- * (`open`/`closed`) plus `data-step` and `data-type`.
+ * The active step's dialog panel with role="dialog", labelled and described by TourTitle/TourDescription.
  *
- * When the step has a resolved target (and is not `type: 'dialog'`) it is
- * positioned by the shared popper layer against that target, exposing the
- * resolved `data-side`/`data-align` and the `--skdx-tour-available-width` /
- * `-available-height` / `-trigger-width` / `-transform-origin` measurement
- * properties. A step with no target — or an explicit `type: 'dialog'` — gets
- * `data-centered` instead, with **no** inline positioning and no
- * `data-side`/`data-align` at all, so CSS is free to place it in the middle of
- * the viewport. The active step's `placement`/`align` override this
- * component's own `side`/`align`, which act as the tour-wide defaults.
+ * `aria-modal="true"` is set only when `preventInteraction` is true; both barrier and claim ship together.
  *
- * Both branches render the same element, deliberately: a step change that
- * remounted the panel would strand the focus trap's listener on the old node.
+ * Focus is trapped and moved onto the panel at each step change (announced as `onOpenAutoFocus`).
+ * On tour end, focus returns to its pre-tour position, announced as `onCloseAutoFocus`.
+ * Either event is vetoable via `preventDefault()`.
  *
- * Focus is trapped inside while the tour runs, moves onto the panel on **each
- * step change** (not just on open — a step change that only swaps text is
- * invisible to a screen reader otherwise), and is restored to whatever was
- * focused before the tour started when it completes or is skipped.
+ * Escape skips the tour if `closeOnEscape`; pointer-down outside skips if `closeOnInteractOutside`.
+ * Both fire before dismissal and are vetoable.
  *
- * Escape skips the tour when `closeOnEscape`; a pointer-down outside skips it
- * only when `closeOnInteractOutside`. Both are reported first — via
- * `onEscapeKeyDown` and `onPointerDownOutside`/`onInteractOutside` — and
- * `event.preventDefault()` on any of them keeps the tour running. Arrow keys
- * are deliberately **not** handled: they belong to whatever the step is
- * pointing at.
+ * Arrow keys (ArrowRight/ArrowLeft) navigate only when root sets `keyboardNavigation`; disabled within text fields.
  *
  * @example
  * ```tsx

package/dist/tour/TourNextTrigger.d.cts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { TourNextTriggerProps } from './types.cjs';
 /**
- * Button that advances to the next step — and, on the **last** step,
- * completes the tour: closes it and fires `onComplete`. That means one button
- * can carry the whole flow; use `data-last` to relabel it ("Next" → "Done")
- * without tracking the index yourself.
+ * Button that advances to the next step. On the last step, completes the tour and fires `onComplete`. Use `data-last` to relabel ("Next" → "Done") without tracking the index.
  *
  * @example
  * ```tsx

package/dist/tour/TourNextTrigger.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { TourNextTriggerProps } from './types.js';
 /**
- * Button that advances to the next step — and, on the **last** step,
- * completes the tour: closes it and fires `onComplete`. That means one button
- * can carry the whole flow; use `data-last` to relabel it ("Next" → "Done")
- * without tracking the index yourself.
+ * Button that advances to the next step. On the last step, completes the tour and fires `onComplete`. Use `data-last` to relabel ("Next" → "Done") without tracking the index.
  *
  * @example
  * ```tsx

package/dist/tour/TourPortal.d.cts

@@ -1,10 +1,7 @@
 import type { TourPortalProps } from './types.cjs';
 /**
- * Teleports the tour's layer — backdrop, spotlight and content — to
- * `document.body` (or a custom `container`), so it escapes any clipping or
- * `overflow` ancestor of the element the tour happens to be pointing at.
- * Stays mounted through `TourContent`'s CSS exit animation and unmounts once
- * it ends, or immediately when none is declared, unless `forceMount` is set.
+ * Teleports tour layers to `document.body` to escape clipping ancestors.
+ * Stays mounted through exit animation; unmounts when it ends or immediately if none.
  *
  * @example
  * ```tsx

package/dist/tour/TourPortal.d.ts

@@ -1,10 +1,7 @@
 import type { TourPortalProps } from './types.js';
 /**
- * Teleports the tour's layer — backdrop, spotlight and content — to
- * `document.body` (or a custom `container`), so it escapes any clipping or
- * `overflow` ancestor of the element the tour happens to be pointing at.
- * Stays mounted through `TourContent`'s CSS exit animation and unmounts once
- * it ends, or immediately when none is declared, unless `forceMount` is set.
+ * Teleports tour layers to `document.body` to escape clipping ancestors.
+ * Stays mounted through exit animation; unmounts when it ends or immediately if none.
  *
  * @example
  * ```tsx

package/dist/tour/TourPrevTrigger.d.cts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { TourPrevTriggerProps } from './types.cjs';
 /**
- * Button that steps the tour back. Disabled on the first step — there is
- * nowhere to go, and a button that silently does nothing is worse than one
- * that says so — and exposes `data-disabled` for styling. Pass `disabled`
- * yourself to disable it on other steps too.
+ * Button that steps the tour back. Disabled on the first step; exposes `data-disabled` for styling.
  *
  * @example
  * ```tsx

package/dist/tour/TourPrevTrigger.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { TourPrevTriggerProps } from './types.js';
 /**
- * Button that steps the tour back. Disabled on the first step — there is
- * nowhere to go, and a button that silently does nothing is worse than one
- * that says so — and exposes `data-disabled` for styling. Pass `disabled`
- * yourself to disable it on other steps too.
+ * Button that steps the tour back. Disabled on the first step; exposes `data-disabled` for styling.
  *
  * @example
  * ```tsx