@skdx/react 0.26.0

package/dist/tooltip/types.d.ts

@@ -0,0 +1,129 @@
+import type * as React from 'react';
+import type { PopperContentProps } from '../utils/popper.js';
+import type { PortalProps } from '../utils/portal.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal Shared delay/skip-delay state distributed from {@link TooltipProvider} to descendant `Tooltip`s via context. Not part of the public API. */
+export interface TooltipProviderContextValue {
+    delayDuration: number;
+    skipDelayDuration: number;
+    disableHoverableContent: boolean;
+    isOpenDelayedRef: React.RefObject<boolean>;
+    onOpen: () => void;
+    onClose: () => void;
+}
+/** Props for {@link TooltipProvider}, an optional ancestor that coordinates hover-delay timing across multiple tooltips. */
+export interface TooltipProviderProps {
+    /**
+     * One or more `Tooltip` trees that share this provider's open/skip-delay timing.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+    /**
+     * Delay before a tooltip opens on hover (ms). Individual `Tooltip`s can
+     * override this via their own `delayDuration` prop.
+     * @default 700
+     */
+    delayDuration?: number;
+    /**
+     * Window after closing during which sibling tooltips open instantly (ms),
+     * skipping their open delay — mirrors how OS tooltips behave when you
+     * sweep the pointer between adjacent triggers.
+     * @default 300
+     */
+    skipDelayDuration?: number;
+    /**
+     * Whether `TooltipContent` ignores the pointer entirely, so moving off the
+     * trigger closes the tooltip even if the pointer lands on the bubble.
+     *
+     * Set it `false` to let the pointer travel into the content and keep the
+     * tooltip open — a short grace period covers the gap between the two. The
+     * default differs from Radix's: a tooltip here is a pass-through hint unless
+     * it is explicitly made hoverable, and nothing inside one is reachable by
+     * keyboard anyway. Individual `Tooltip`s can override it.
+     * @default true
+     */
+    disableHoverableContent?: boolean;
+}
+/** @internal Shared state distributed from {@link Tooltip} to its parts via context. Not part of the public API. */
+export interface TooltipContextValue {
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    open: boolean;
+    disableHoverableContent: boolean;
+    onOpen: () => void;
+    onDelayedOpen: () => void;
+    onClose: () => void;
+    onDelayedClose: () => void;
+}
+/** Props for the {@link Tooltip} root. */
+export interface TooltipProps {
+    /**
+     * Must contain exactly one `TooltipTrigger` (and, elsewhere in the tree, a
+     * `TooltipPortal`/`TooltipContent` pair) — this is the anchor Tooltip positions against.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the tooltip is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the tooltip is initially open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever the tooltip opens or closes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Fires with the new open state once the change has finished on screen —
+     * after `TooltipContent`'s enter or exit animation ends, or as soon as it has
+     * settled when the bubble declares no animation.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * Whether `TooltipContent` ignores the pointer, so moving off the trigger
+     * closes this tooltip even if the pointer lands on the bubble. Overrides the
+     * ancestor `TooltipProvider`'s setting.
+     * @default undefined — falls back to the ancestor `TooltipProvider`'s `disableHoverableContent`, or `true` if there is none.
+     */
+    disableHoverableContent?: boolean;
+    /**
+     * Delay before this tooltip opens on hover (ms). Overrides the ancestor
+     * `TooltipProvider`'s `delayDuration` when set; otherwise falls back to it
+     * (or `700` if there is no provider).
+     * @default undefined — falls back to the ancestor `TooltipProvider`'s `delayDuration`, or `700` if there is none.
+     */
+    delayDuration?: number;
+}
+/** Props for {@link TooltipTrigger}, the element that reveals the tooltip on hover/focus and anchors its position. */
+export interface TooltipTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link TooltipPortal}, which teleports its children to `document.body`. */
+export interface TooltipPortalProps extends PortalProps {
+    /**
+     * Render the portal even while the tooltip is closed, instead of
+     * unmounting it. Useful for animation libraries that need the outgoing
+     * content present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/**
+ * Props for {@link TooltipContent}, the floating bubble. Extends the shared
+ * popper positioning props (`side`, `align`, `sideOffset`, `alignOffset`,
+ * `avoidCollisions`, `collisionPadding`, `collisionBoundary`).
+ */
+export interface TooltipContentProps extends PopperContentProps {
+    /**
+     * Keep this bubble mounted even while the tooltip is closed. Useful for
+     * animation libraries that need the outgoing content present in the DOM
+     * during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}

package/dist/tour/Tour.cjs

@@ -0,0 +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});

package/dist/tour/Tour.d.cts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { TourContextValue, TourProps } from './types.cjs';
+export declare const TourProvider: {
+    (props: TourContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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>
+ * ```
+ */
+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 namespace Tour {
+    var displayName: string;
+}

package/dist/tour/Tour.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { TourContextValue, TourProps } from './types.js';
+export declare const TourProvider: {
+    (props: TourContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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>
+ * ```
+ */
+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 namespace Tour {
+    var displayName: string;
+}

package/dist/tour/Tour.js

@@ -0,0 +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};

package/dist/tour/TourArrow.d.cts

@@ -0,0 +1,20 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <TourContent>
+ *   <TourTitle>Your inbox</TourTitle>
+ *   <TourArrow />
+ * </TourContent>
+ * ```
+ */
+export declare const TourArrow: React.ForwardRefExoticComponent<Omit<TourArrowProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/tour/TourArrow.d.ts

@@ -0,0 +1,20 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <TourContent>
+ *   <TourTitle>Your inbox</TourTitle>
+ *   <TourArrow />
+ * </TourContent>
+ * ```
+ */
+export declare const TourArrow: React.ForwardRefExoticComponent<Omit<TourArrowProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/tour/TourBackdrop.d.cts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { TourBackdropProps } from './types.cjs';
+/**
+ * The dimming layer behind the tour, carrying the spotlight geometry as the
+ * custom properties `--skdx-tour-x` / `-y` / `-width` / `-height` (already
+ * padded by `spotlightPadding` and clamped to the viewport). Those four are
+ * everything a cutout needs, so the hole over the highlighted element is
+ * drawable from CSS alone — a `clip-path`, a `radial-gradient`, or a giant
+ * `box-shadow` on `TourSpotlight` — with no measuring in JavaScript.
+ *
+ * Decorative and `aria-hidden`: the active step is announced through
+ * `TourContent`, not through the backdrop. Exposes `data-state`
+ * (`open`/`closed`) for animation and unmounts with the tour unless
+ * `forceMount` is set.
+ *
+ * @example
+ * ```css
+ * .tour-backdrop {
+ *   position: fixed;
+ *   inset: 0;
+ *   background: rgb(0 0 0 / 0.5);
+ *   clip-path: polygon(
+ *     0 0, 100% 0, 100% 100%, 0 100%, 0 0,
+ *     var(--skdx-tour-x) var(--skdx-tour-y),
+ *     var(--skdx-tour-x) calc(var(--skdx-tour-y) + var(--skdx-tour-height)),
+ *     calc(var(--skdx-tour-x) + var(--skdx-tour-width)) calc(var(--skdx-tour-y) + var(--skdx-tour-height)),
+ *     calc(var(--skdx-tour-x) + var(--skdx-tour-width)) var(--skdx-tour-y),
+ *     var(--skdx-tour-x) var(--skdx-tour-y)
+ *   );
+ * }
+ * ```
+ */
+export declare const TourBackdrop: React.ForwardRefExoticComponent<Omit<TourBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tour/TourBackdrop.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { TourBackdropProps } from './types.js';
+/**
+ * The dimming layer behind the tour, carrying the spotlight geometry as the
+ * custom properties `--skdx-tour-x` / `-y` / `-width` / `-height` (already
+ * padded by `spotlightPadding` and clamped to the viewport). Those four are
+ * everything a cutout needs, so the hole over the highlighted element is
+ * drawable from CSS alone — a `clip-path`, a `radial-gradient`, or a giant
+ * `box-shadow` on `TourSpotlight` — with no measuring in JavaScript.
+ *
+ * Decorative and `aria-hidden`: the active step is announced through
+ * `TourContent`, not through the backdrop. Exposes `data-state`
+ * (`open`/`closed`) for animation and unmounts with the tour unless
+ * `forceMount` is set.
+ *
+ * @example
+ * ```css
+ * .tour-backdrop {
+ *   position: fixed;
+ *   inset: 0;
+ *   background: rgb(0 0 0 / 0.5);
+ *   clip-path: polygon(
+ *     0 0, 100% 0, 100% 100%, 0 100%, 0 0,
+ *     var(--skdx-tour-x) var(--skdx-tour-y),
+ *     var(--skdx-tour-x) calc(var(--skdx-tour-y) + var(--skdx-tour-height)),
+ *     calc(var(--skdx-tour-x) + var(--skdx-tour-width)) calc(var(--skdx-tour-y) + var(--skdx-tour-height)),
+ *     calc(var(--skdx-tour-x) + var(--skdx-tour-width)) var(--skdx-tour-y),
+ *     var(--skdx-tour-x) var(--skdx-tour-y)
+ *   );
+ * }
+ * ```
+ */
+export declare const TourBackdrop: React.ForwardRefExoticComponent<Omit<TourBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tour/TourCloseTrigger.d.cts

@@ -0,0 +1,16 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <TourCloseTrigger aria-label="Close tour">✕</TourCloseTrigger>
+ * ```
+ */
+export declare const TourCloseTrigger: React.ForwardRefExoticComponent<Omit<TourCloseTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/tour/TourCloseTrigger.d.ts

@@ -0,0 +1,16 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <TourCloseTrigger aria-label="Close tour">✕</TourCloseTrigger>
+ * ```
+ */
+export declare const TourCloseTrigger: React.ForwardRefExoticComponent<Omit<TourCloseTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/tour/TourContent.d.cts

@@ -0,0 +1,46 @@
+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`.
+ *
+ * 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.
+ *
+ * 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 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 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.
+ *
+ * @example
+ * ```tsx
+ * <TourPortal>
+ *   <TourBackdrop />
+ *   <TourSpotlight />
+ *   <TourContent side="right" sideOffset={12}>
+ *     <TourTitle>Your inbox</TourTitle>
+ *     <TourDescription>Everything lands here first.</TourDescription>
+ *     <TourArrow />
+ *   </TourContent>
+ * </TourPortal>
+ * ```
+ */
+export declare const TourContent: React.ForwardRefExoticComponent<Omit<TourContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tour/TourContent.d.ts

@@ -0,0 +1,46 @@
+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`.
+ *
+ * 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.
+ *
+ * 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 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 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.
+ *
+ * @example
+ * ```tsx
+ * <TourPortal>
+ *   <TourBackdrop />
+ *   <TourSpotlight />
+ *   <TourContent side="right" sideOffset={12}>
+ *     <TourTitle>Your inbox</TourTitle>
+ *     <TourDescription>Everything lands here first.</TourDescription>
+ *     <TourArrow />
+ *   </TourContent>
+ * </TourPortal>
+ * ```
+ */
+export declare const TourContent: React.ForwardRefExoticComponent<Omit<TourContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tour/TourDescription.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { TourDescriptionProps } from './types.cjs';
+/**
+ * The active step's accessible description: renders a `<p>` wired to
+ * `TourContent` via `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <TourContent>
+ *   <TourTitle>Your inbox</TourTitle>
+ *   <TourDescription>Everything lands here first.</TourDescription>
+ * </TourContent>
+ * ```
+ */
+export declare const TourDescription: React.ForwardRefExoticComponent<Omit<TourDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/tour/TourDescription.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { TourDescriptionProps } from './types.js';
+/**
+ * The active step's accessible description: renders a `<p>` wired to
+ * `TourContent` via `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <TourContent>
+ *   <TourTitle>Your inbox</TourTitle>
+ *   <TourDescription>Everything lands here first.</TourDescription>
+ * </TourContent>
+ * ```
+ */
+export declare const TourDescription: React.ForwardRefExoticComponent<Omit<TourDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/tour/TourNextTrigger.d.cts

@@ -0,0 +1,14 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <TourNextTrigger>{isLast ? 'Done' : 'Next'}</TourNextTrigger>
+ * ```
+ */
+export declare const TourNextTrigger: React.ForwardRefExoticComponent<Omit<TourNextTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/tour/TourNextTrigger.d.ts

@@ -0,0 +1,14 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <TourNextTrigger>{isLast ? 'Done' : 'Next'}</TourNextTrigger>
+ * ```
+ */
+export declare const TourNextTrigger: React.ForwardRefExoticComponent<Omit<TourNextTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/tour/TourPortal.d.cts

@@ -0,0 +1,24 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <Tour steps={steps}>
+ *   <TourTrigger>Take the tour</TourTrigger>
+ *   <TourPortal>
+ *     <TourBackdrop />
+ *     <TourSpotlight />
+ *     <TourContent>…</TourContent>
+ *   </TourPortal>
+ * </Tour>
+ * ```
+ */
+export declare const TourPortal: {
+    ({ forceMount, children, ...props }: TourPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};