@tour-kit/react 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/index.cjs +2 -24
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +106 -1
- package/dist/index.d.ts +106 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +5 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @tour-kit/react
|
|
2
2
|
|
|
3
|
+
## 0.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- ### @tour-kit/react
|
|
8
|
+
|
|
9
|
+
- Fix `Tour` component to properly render children content alongside tour steps
|
|
10
|
+
- Add `TourCard`, `TourOverlay`, and navigation components with Floating UI positioning
|
|
11
|
+
- Add primitive components: `TourPortal`, `TourArrow`
|
|
12
|
+
|
|
13
|
+
### @tour-kit/core
|
|
14
|
+
|
|
15
|
+
- Export hooks and utilities for tour state management
|
|
16
|
+
- Add focus trap, keyboard navigation, and spotlight hooks
|
|
17
|
+
|
|
18
|
+
### @tour-kit/hints
|
|
19
|
+
|
|
20
|
+
- Initial hints package setup
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- Updated dependencies
|
|
25
|
+
- @tour-kit/core@0.3.0
|
|
26
|
+
|
|
3
27
|
## 0.2.0
|
|
4
28
|
|
|
5
29
|
### Minor Changes
|
package/dist/index.cjs
CHANGED
|
@@ -1,25 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
-
for (let key of __getOwnPropNames(from))
|
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
-
|
|
17
|
-
// src/index.ts
|
|
18
|
-
var index_exports = {};
|
|
19
|
-
module.exports = __toCommonJS(index_exports);
|
|
20
|
-
__reExport(index_exports, require("@tour-kit/core"), module.exports);
|
|
21
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
22
|
-
0 && (module.exports = {
|
|
23
|
-
...require("@tour-kit/core")
|
|
24
|
-
});
|
|
1
|
+
'use strict';var core=require('@tour-kit/core'),g=require('react'),react=require('@floating-ui/react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime'),reactDom=require('react-dom');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var g__namespace=/*#__PURE__*/_interopNamespace(g);function n(...t){return tailwindMerge.twMerge(clsx.clsx(t))}var S=g__namespace.forwardRef(({context:t,className:o},e)=>jsxRuntime.jsx(react.FloatingArrow,{ref:e,context:t,className:o,fill:"hsl(var(--popover))",stroke:"hsl(var(--border))",strokeWidth:1}));S.displayName="TourArrow";function v({children:t,container:o}){let[e,r]=g__namespace.useState(false);return g__namespace.useEffect(()=>{r(true);},[]),e?reactDom.createPortal(t,o??document.body):null}function R({content:t,className:o}){return jsxRuntime.jsx("div",{className:n("py-3 text-sm text-muted-foreground",o),children:t})}function k({isFirstStep:t,isLastStep:o,onPrev:e,onNext:r,onSkip:i,className:a,prevLabel:s="Back",nextLabel:u="Next",finishLabel:l="Finish",skipLabel:p="Skip"}){return jsxRuntime.jsxs("div",{className:n("flex items-center gap-2",a),children:[i&&!o&&jsxRuntime.jsx("button",{type:"button",onClick:i,className:"text-sm text-muted-foreground hover:text-foreground transition-colors",children:p}),!t&&jsxRuntime.jsx("button",{type:"button",onClick:e,className:"inline-flex items-center justify-center rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors",children:s}),jsxRuntime.jsx("button",{type:"button",onClick:r,className:"inline-flex items-center justify-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",children:o?l:u})]})}function F({current:t,total:o,variant:e="dots",className:r}){if(e==="text")return jsxRuntime.jsxs("span",{className:n("text-sm text-muted-foreground",r),children:[t," of ",o]});if(e==="bar"){let i=t/o*100;return jsxRuntime.jsx("div",{className:n("h-1.5 w-20 overflow-hidden rounded-full bg-secondary",r),children:jsxRuntime.jsx("div",{className:"h-full bg-primary transition-all duration-300",style:{width:`${i}%`}})})}return jsxRuntime.jsx("div",{className:n("flex gap-1",r),children:Array.from({length:o},(i,a)=>jsxRuntime.jsx("div",{className:n("h-2 w-2 rounded-full transition-colors",a+1===t?"bg-primary":"bg-secondary")},a))})}function E({currentStep:t,totalSteps:o,showNavigation:e=true,showProgress:r=true,isFirstStep:i,isLastStep:a,onPrev:s,onNext:u,onSkip:l,className:p}){return jsxRuntime.jsxs("div",{className:n("flex items-center justify-between pt-2",p),children:[r&&jsxRuntime.jsx(F,{current:t,total:o}),e&&jsxRuntime.jsx(k,{isFirstStep:i,isLastStep:a,onPrev:s,onNext:u,onSkip:l})]})}function A({className:t,"aria-label":o="Close tour"}){let{skip:e}=core.useTour();return jsxRuntime.jsx("button",{type:"button",onClick:e,className:n("rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",t),"aria-label":o,children:jsxRuntime.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[jsxRuntime.jsx("path",{d:"M18 6 6 18"}),jsxRuntime.jsx("path",{d:"m6 6 12 12"})]})})}function L({title:t,titleId:o,showClose:e=true,className:r}){return !t&&!e?null:jsxRuntime.jsxs("div",{className:n("flex items-start justify-between gap-2",r),children:[t&&jsxRuntime.jsx("h3",{id:o,className:"font-semibold leading-none tracking-tight",children:t}),e&&jsxRuntime.jsx(A,{})]})}function me(t){return t?t.replace("-center",""):"bottom"}function H({className:t}){let{isActive:o,currentStep:e,currentStepIndex:r,totalSteps:i,next:a,prev:s,skip:u,isFirstStep:l,isLastStep:p}=core.useTour(),c=g__namespace.useRef(null),{containerRef:f,activate:m,deactivate:d}=core.useFocusTrap(o),h=g__namespace.useMemo(()=>e?.target?typeof e.target=="string"?document.querySelector(e.target):e.target.current:null,[e?.target]),{refs:N,floatingStyles:$,context:q}=react.useFloating({open:o,placement:me(e?.placement),middleware:[react.offset(e?.offset?.[1]??12),react.flip({fallbackAxisSideDirection:"start"}),react.shift({padding:8}),react.arrow({element:c})],whileElementsMounted:react.autoUpdate});if(g__namespace.useEffect(()=>{h&&N.setReference(h);},[h,N]),g__namespace.useEffect(()=>{o?m():d();},[o,m,d]),!o||!e)return null;let z=e.showNavigation??true,W=e.showClose??true,_=e.showProgress??true;return jsxRuntime.jsx(v,{children:jsxRuntime.jsxs("div",{ref:K=>{N.setFloating(K),f&&(f.current=K);},style:$,className:n("z-50 w-80 rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg",e.className,t),role:"dialog","aria-modal":"true","aria-labelledby":`tour-step-title-${e.id}`,children:[jsxRuntime.jsx(L,{title:e.title,titleId:`tour-step-title-${e.id}`,showClose:W}),jsxRuntime.jsx(R,{content:e.content}),jsxRuntime.jsx(E,{currentStep:r+1,totalSteps:i,showNavigation:z,showProgress:_,isFirstStep:l,isLastStep:p,onPrev:s,onNext:a,onSkip:u}),jsxRuntime.jsx(S,{ref:c,context:q})]})})}function V({className:t,onClick:o}){let{isActive:e,currentStep:r}=core.useTour(),{overlayStyle:i,cutoutStyle:a,show:s,hide:u,targetRect:l}=core.useSpotlight(),p=core.usePrefersReducedMotion(),c=g__namespace.useMemo(()=>r?.target?typeof r.target=="string"?document.querySelector(r.target):r.target.current:null,[r?.target]);return g__namespace.useEffect(()=>{e&&c?s(c,{padding:r?.spotlightPadding,borderRadius:r?.spotlightRadius,animate:!p}):u();},[e,c,r,s,u,p]),e?jsxRuntime.jsx(v,{children:jsxRuntime.jsx("div",{className:n("fixed inset-0 z-40",t),style:i,onClick:o,"aria-hidden":"true",children:l&&jsxRuntime.jsx("div",{className:"absolute bg-transparent",style:{...a,pointerEvents:r?.interactive?"auto":"none"}})})}):null}function C(t){return null}C.displayName="TourStep";function Se({id:t,autoStart:o=false,config:e,onStart:r,onComplete:i,onSkip:a,onStepChange:s,children:u}){let{steps:l,content:p}=g__namespace.useMemo(()=>{let f=[],m=[];return g__namespace.Children.forEach(u,d=>{g__namespace.isValidElement(d)&&d.type===C?f.push(d.props):m.push(d);}),{steps:f,content:m}},[u]),c={id:t,steps:l,autoStart:o,...e,onStart:r?()=>r():void 0,onComplete:i?()=>i():void 0,onSkip:a?()=>a():void 0,onStepChange:s?(f,m)=>s(f,m):void 0};return jsxRuntime.jsxs(core.TourProvider,{tours:[c],children:[p,jsxRuntime.jsx(V,{}),jsxRuntime.jsx(H,{})]})}
|
|
2
|
+
Object.defineProperty(exports,"TourContext",{enumerable:true,get:function(){return core.TourContext}});Object.defineProperty(exports,"TourKitContext",{enumerable:true,get:function(){return core.TourKitContext}});Object.defineProperty(exports,"TourKitProvider",{enumerable:true,get:function(){return core.TourKitProvider}});Object.defineProperty(exports,"TourProvider",{enumerable:true,get:function(){return core.TourProvider}});Object.defineProperty(exports,"announce",{enumerable:true,get:function(){return core.announce}});Object.defineProperty(exports,"calculatePosition",{enumerable:true,get:function(){return core.calculatePosition}});Object.defineProperty(exports,"createPrefixedStorage",{enumerable:true,get:function(){return core.createPrefixedStorage}});Object.defineProperty(exports,"createStep",{enumerable:true,get:function(){return core.createStep}});Object.defineProperty(exports,"createStorageAdapter",{enumerable:true,get:function(){return core.createStorageAdapter}});Object.defineProperty(exports,"createTour",{enumerable:true,get:function(){return core.createTour}});Object.defineProperty(exports,"defaultA11yConfig",{enumerable:true,get:function(){return core.defaultA11yConfig}});Object.defineProperty(exports,"defaultKeyboardConfig",{enumerable:true,get:function(){return core.defaultKeyboardConfig}});Object.defineProperty(exports,"defaultPersistenceConfig",{enumerable:true,get:function(){return core.defaultPersistenceConfig}});Object.defineProperty(exports,"defaultScrollConfig",{enumerable:true,get:function(){return core.defaultScrollConfig}});Object.defineProperty(exports,"defaultSpotlightConfig",{enumerable:true,get:function(){return core.defaultSpotlightConfig}});Object.defineProperty(exports,"generateId",{enumerable:true,get:function(){return core.generateId}});Object.defineProperty(exports,"getScrollParent",{enumerable:true,get:function(){return core.getScrollParent}});Object.defineProperty(exports,"getStepAnnouncement",{enumerable:true,get:function(){return core.getStepAnnouncement}});Object.defineProperty(exports,"isElementVisible",{enumerable:true,get:function(){return core.isElementVisible}});Object.defineProperty(exports,"prefersReducedMotion",{enumerable:true,get:function(){return core.prefersReducedMotion}});Object.defineProperty(exports,"safeJSONParse",{enumerable:true,get:function(){return core.safeJSONParse}});Object.defineProperty(exports,"scrollIntoView",{enumerable:true,get:function(){return core.scrollIntoView}});Object.defineProperty(exports,"useElementPosition",{enumerable:true,get:function(){return core.useElementPosition}});Object.defineProperty(exports,"useFocusTrap",{enumerable:true,get:function(){return core.useFocusTrap}});Object.defineProperty(exports,"useKeyboardNavigation",{enumerable:true,get:function(){return core.useKeyboardNavigation}});Object.defineProperty(exports,"useMediaQuery",{enumerable:true,get:function(){return core.useMediaQuery}});Object.defineProperty(exports,"usePersistence",{enumerable:true,get:function(){return core.usePersistence}});Object.defineProperty(exports,"usePrefersReducedMotion",{enumerable:true,get:function(){return core.usePrefersReducedMotion}});Object.defineProperty(exports,"useSpotlight",{enumerable:true,get:function(){return core.useSpotlight}});Object.defineProperty(exports,"useStep",{enumerable:true,get:function(){return core.useStep}});Object.defineProperty(exports,"useTour",{enumerable:true,get:function(){return core.useTour}});Object.defineProperty(exports,"waitForElement",{enumerable:true,get:function(){return core.waitForElement}});exports.Tour=Se;exports.TourArrow=S;exports.TourCard=H;exports.TourCardContent=R;exports.TourCardFooter=E;exports.TourCardHeader=L;exports.TourClose=A;exports.TourNavigation=k;exports.TourOverlay=V;exports.TourPortal=v;exports.TourProgress=F;exports.TourStep=C;exports.cn=n;//# sourceMappingURL=index.cjs.map
|
|
25
3
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Re-export types from core\nexport * from '@tour-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AACA,0BAAc,2BADd;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/cn.ts","../src/components/primitives/tour-arrow.tsx","../src/components/primitives/tour-portal.tsx","../src/components/card/tour-card-content.tsx","../src/components/navigation/tour-navigation.tsx","../src/components/navigation/tour-progress.tsx","../src/components/card/tour-card-footer.tsx","../src/components/navigation/tour-close.tsx","../src/components/card/tour-card-header.tsx","../src/components/card/tour-card.tsx","../src/components/overlay/tour-overlay.tsx","../src/components/tour/tour-step.tsx","../src/components/tour/tour.tsx"],"names":["cn","inputs","twMerge","clsx","TourArrow","U","context","className","ref","jsx","FloatingArrow","TourPortal","children","container","mounted","setMounted","P","createPortal","TourCardContent","content","TourNavigation","isFirstStep","isLastStep","onPrev","onNext","onSkip","prevLabel","nextLabel","finishLabel","skipLabel","jsxs","TourProgress","current","total","variant","percentage","_","i","TourCardFooter","currentStep","totalSteps","showNavigation","showProgress","TourClose","ariaLabel","skip","useTour","TourCardHeader","title","titleId","showClose","toFloatingPlacement","placement","TourCard","isActive","currentStepIndex","next","prev","arrowRef","g","containerRef","activate","deactivate","useFocusTrap","targetElement","refs","floatingStyles","useFloating","offset","flip","shift","arrow","autoUpdate","node","TourOverlay","onClick","overlayStyle","cutoutStyle","show","hide","targetRect","useSpotlight","prefersReducedMotion","usePrefersReducedMotion","x","TourStep","_props","Tour","id","autoStart","config","onStart","onComplete","onStepChange","steps","T","stepElements","contentElements","child","tour","step","index","TourProvider"],"mappings":"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","file":"index.cjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs))\n}\n","import { FloatingArrow } from '@floating-ui/react'\nimport type { FloatingContext } from '@floating-ui/react'\nimport * as React from 'react'\n\ninterface TourArrowProps {\n context: FloatingContext\n className?: string\n}\n\nexport const TourArrow = React.forwardRef<SVGSVGElement, TourArrowProps>(\n ({ context, className }, ref) => {\n return (\n <FloatingArrow\n ref={ref}\n context={context}\n className={className}\n fill=\"hsl(var(--popover))\"\n stroke=\"hsl(var(--border))\"\n strokeWidth={1}\n />\n )\n }\n)\n\nTourArrow.displayName = 'TourArrow'\n","import * as React from 'react'\nimport { createPortal } from 'react-dom'\n\ninterface TourPortalProps {\n children: React.ReactNode\n container?: HTMLElement\n}\n\nexport function TourPortal({ children, container }: TourPortalProps) {\n const [mounted, setMounted] = React.useState(false)\n\n React.useEffect(() => {\n setMounted(true)\n }, [])\n\n if (!mounted) return null\n\n return createPortal(children, container ?? document.body)\n}\n","import type * as React from 'react'\nimport { cn } from '../../utils/cn'\n\ninterface TourCardContentProps {\n content: React.ReactNode\n className?: string\n}\n\nexport function TourCardContent({ content, className }: TourCardContentProps) {\n return <div className={cn('py-3 text-sm text-muted-foreground', className)}>{content}</div>\n}\n","import { cn } from '../../utils/cn'\n\ninterface TourNavigationProps {\n isFirstStep: boolean\n isLastStep: boolean\n onPrev: () => void\n onNext: () => void\n onSkip?: () => void\n className?: string\n prevLabel?: string\n nextLabel?: string\n finishLabel?: string\n skipLabel?: string\n}\n\nexport function TourNavigation({\n isFirstStep,\n isLastStep,\n onPrev,\n onNext,\n onSkip,\n className,\n prevLabel = 'Back',\n nextLabel = 'Next',\n finishLabel = 'Finish',\n skipLabel = 'Skip',\n}: TourNavigationProps) {\n return (\n <div className={cn('flex items-center gap-2', className)}>\n {onSkip && !isLastStep && (\n <button\n type=\"button\"\n onClick={onSkip}\n className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\"\n >\n {skipLabel}\n </button>\n )}\n {!isFirstStep && (\n <button\n type=\"button\"\n onClick={onPrev}\n className=\"inline-flex items-center justify-center rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors\"\n >\n {prevLabel}\n </button>\n )}\n <button\n type=\"button\"\n onClick={onNext}\n className=\"inline-flex items-center justify-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors\"\n >\n {isLastStep ? finishLabel : nextLabel}\n </button>\n </div>\n )\n}\n","import { cn } from '../../utils/cn'\n\ninterface TourProgressProps {\n current: number\n total: number\n variant?: 'dots' | 'bar' | 'text'\n className?: string\n}\n\nexport function TourProgress({ current, total, variant = 'dots', className }: TourProgressProps) {\n if (variant === 'text') {\n return (\n <span className={cn('text-sm text-muted-foreground', className)}>\n {current} of {total}\n </span>\n )\n }\n\n if (variant === 'bar') {\n const percentage = (current / total) * 100\n return (\n <div className={cn('h-1.5 w-20 overflow-hidden rounded-full bg-secondary', className)}>\n <div\n className=\"h-full bg-primary transition-all duration-300\"\n style={{ width: `${percentage}%` }}\n />\n </div>\n )\n }\n\n return (\n <div className={cn('flex gap-1', className)}>\n {Array.from({ length: total }, (_, i) => (\n <div\n key={i}\n className={cn(\n 'h-2 w-2 rounded-full transition-colors',\n i + 1 === current ? 'bg-primary' : 'bg-secondary'\n )}\n />\n ))}\n </div>\n )\n}\n","import { cn } from '../../utils/cn'\nimport { TourNavigation } from '../navigation/tour-navigation'\nimport { TourProgress } from '../navigation/tour-progress'\n\ninterface TourCardFooterProps {\n currentStep: number\n totalSteps: number\n showNavigation?: boolean\n showProgress?: boolean\n isFirstStep: boolean\n isLastStep: boolean\n onPrev: () => void\n onNext: () => void\n onSkip: () => void\n className?: string\n}\n\nexport function TourCardFooter({\n currentStep,\n totalSteps,\n showNavigation = true,\n showProgress = true,\n isFirstStep,\n isLastStep,\n onPrev,\n onNext,\n onSkip,\n className,\n}: TourCardFooterProps) {\n return (\n <div className={cn('flex items-center justify-between pt-2', className)}>\n {showProgress && <TourProgress current={currentStep} total={totalSteps} />}\n {showNavigation && (\n <TourNavigation\n isFirstStep={isFirstStep}\n isLastStep={isLastStep}\n onPrev={onPrev}\n onNext={onNext}\n onSkip={onSkip}\n />\n )}\n </div>\n )\n}\n","import { useTour } from '@tour-kit/core'\nimport { cn } from '../../utils/cn'\n\ninterface TourCloseProps {\n className?: string\n 'aria-label'?: string\n}\n\nexport function TourClose({ className, 'aria-label': ariaLabel = 'Close tour' }: TourCloseProps) {\n const { skip } = useTour()\n\n return (\n <button\n type=\"button\"\n onClick={skip}\n className={cn(\n 'rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n className\n )}\n aria-label={ariaLabel}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n )\n}\n","import type * as React from 'react'\nimport { cn } from '../../utils/cn'\nimport { TourClose } from '../navigation/tour-close'\n\ninterface TourCardHeaderProps {\n title?: React.ReactNode\n titleId: string\n showClose?: boolean\n className?: string\n}\n\nexport function TourCardHeader({\n title,\n titleId,\n showClose = true,\n className,\n}: TourCardHeaderProps) {\n if (!title && !showClose) return null\n\n return (\n <div className={cn('flex items-start justify-between gap-2', className)}>\n {title && (\n <h3 id={titleId} className=\"font-semibold leading-none tracking-tight\">\n {title}\n </h3>\n )}\n {showClose && <TourClose />}\n </div>\n )\n}\n","import {\n type Placement as FloatingPlacement,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n useFloating,\n} from '@floating-ui/react'\nimport { type Placement, useFocusTrap, useTour } from '@tour-kit/core'\nimport * as React from 'react'\nimport { cn } from '../../utils/cn'\nimport { TourArrow } from '../primitives/tour-arrow'\nimport { TourPortal } from '../primitives/tour-portal'\nimport { TourCardContent } from './tour-card-content'\nimport { TourCardFooter } from './tour-card-footer'\nimport { TourCardHeader } from './tour-card-header'\n\n// Map our Placement type to floating-ui Placement (center -> no suffix)\nfunction toFloatingPlacement(placement?: Placement): FloatingPlacement {\n if (!placement) return 'bottom'\n // floating-ui uses 'top' instead of 'top-center', etc.\n return placement.replace('-center', '') as FloatingPlacement\n}\n\ninterface TourCardProps {\n className?: string\n}\n\nexport function TourCard({ className }: TourCardProps) {\n const {\n isActive,\n currentStep,\n currentStepIndex,\n totalSteps,\n next,\n prev,\n skip,\n isFirstStep,\n isLastStep,\n } = useTour()\n\n const arrowRef = React.useRef<SVGSVGElement>(null)\n const { containerRef, activate, deactivate } = useFocusTrap(isActive)\n\n const targetElement = React.useMemo(() => {\n if (!currentStep?.target) return null\n if (typeof currentStep.target === 'string') {\n return document.querySelector<HTMLElement>(currentStep.target)\n }\n return currentStep.target.current\n }, [currentStep?.target])\n\n const { refs, floatingStyles, context } = useFloating({\n open: isActive,\n placement: toFloatingPlacement(currentStep?.placement),\n middleware: [\n offset(currentStep?.offset?.[1] ?? 12),\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ padding: 8 }),\n arrow({ element: arrowRef }),\n ],\n whileElementsMounted: autoUpdate,\n })\n\n React.useEffect(() => {\n if (targetElement) {\n refs.setReference(targetElement)\n }\n }, [targetElement, refs])\n\n React.useEffect(() => {\n if (isActive) {\n activate()\n } else {\n deactivate()\n }\n }, [isActive, activate, deactivate])\n\n if (!isActive || !currentStep) return null\n\n const showNavigation = currentStep.showNavigation ?? true\n const showClose = currentStep.showClose ?? true\n const showProgress = currentStep.showProgress ?? true\n\n return (\n <TourPortal>\n <div\n ref={(node) => {\n refs.setFloating(node)\n if (containerRef) {\n ;(containerRef as React.MutableRefObject<HTMLElement | null>).current = node\n }\n }}\n style={floatingStyles}\n className={cn(\n 'z-50 w-80 rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg',\n currentStep.className,\n className\n )}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={`tour-step-title-${currentStep.id}`}\n >\n <TourCardHeader\n title={currentStep.title}\n titleId={`tour-step-title-${currentStep.id}`}\n showClose={showClose}\n />\n\n <TourCardContent content={currentStep.content} />\n\n <TourCardFooter\n currentStep={currentStepIndex + 1}\n totalSteps={totalSteps}\n showNavigation={showNavigation}\n showProgress={showProgress}\n isFirstStep={isFirstStep}\n isLastStep={isLastStep}\n onPrev={prev}\n onNext={next}\n onSkip={skip}\n />\n\n <TourArrow ref={arrowRef} context={context} />\n </div>\n </TourPortal>\n )\n}\n","import { usePrefersReducedMotion, useSpotlight, useTour } from '@tour-kit/core'\nimport * as React from 'react'\nimport { cn } from '../../utils/cn'\nimport { TourPortal } from '../primitives/tour-portal'\n\ninterface TourOverlayProps {\n className?: string\n onClick?: () => void\n}\n\nexport function TourOverlay({ className, onClick }: TourOverlayProps) {\n const { isActive, currentStep } = useTour()\n const { overlayStyle, cutoutStyle, show, hide, targetRect } = useSpotlight()\n const prefersReducedMotion = usePrefersReducedMotion()\n\n const targetElement = React.useMemo(() => {\n if (!currentStep?.target) return null\n if (typeof currentStep.target === 'string') {\n return document.querySelector<HTMLElement>(currentStep.target)\n }\n return currentStep.target.current\n }, [currentStep?.target])\n\n React.useEffect(() => {\n if (isActive && targetElement) {\n show(targetElement, {\n padding: currentStep?.spotlightPadding,\n borderRadius: currentStep?.spotlightRadius,\n animate: !prefersReducedMotion,\n })\n } else {\n hide()\n }\n }, [isActive, targetElement, currentStep, show, hide, prefersReducedMotion])\n\n if (!isActive) return null\n\n return (\n <TourPortal>\n <div\n className={cn('fixed inset-0 z-40', className)}\n style={overlayStyle}\n onClick={onClick}\n aria-hidden=\"true\"\n >\n {targetRect && (\n <div\n className=\"absolute bg-transparent\"\n style={{\n ...cutoutStyle,\n pointerEvents: currentStep?.interactive ? 'auto' : 'none',\n }}\n />\n )}\n </div>\n </TourPortal>\n )\n}\n","import type { TourStep as TourStepType } from '@tour-kit/core'\n\nexport function TourStep(_props: TourStepType): null {\n return null\n}\n\nTourStep.displayName = 'TourStep'\n","import { TourProvider, type TourStep as TourStepType, type Tour as TourType } from '@tour-kit/core'\nimport * as React from 'react'\nimport { TourCard } from '../card/tour-card'\nimport { TourOverlay } from '../overlay/tour-overlay'\nimport { TourStep } from './tour-step'\n\ninterface TourProps {\n id: string\n autoStart?: boolean\n config?: Omit<TourType, 'id' | 'steps'>\n onStart?: () => void\n onComplete?: () => void\n onSkip?: () => void\n onStepChange?: (step: TourStepType, index: number) => void\n children: React.ReactNode\n}\n\nexport function Tour({\n id,\n autoStart = false,\n config,\n onStart,\n onComplete,\n onSkip,\n onStepChange,\n children,\n}: TourProps) {\n const { steps, content } = React.useMemo(() => {\n const stepElements: TourStepType[] = []\n const contentElements: React.ReactNode[] = []\n\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) && child.type === TourStep) {\n stepElements.push(child.props as TourStepType)\n } else {\n contentElements.push(child)\n }\n })\n\n return { steps: stepElements, content: contentElements }\n }, [children])\n\n const tour: TourType = {\n id,\n steps,\n autoStart,\n ...config,\n onStart: onStart ? () => onStart() : undefined,\n onComplete: onComplete ? () => onComplete() : undefined,\n onSkip: onSkip ? () => onSkip() : undefined,\n onStepChange: onStepChange ? (step, index) => onStepChange(step, index) : undefined,\n }\n\n return (\n <TourProvider tours={[tour]}>\n {content}\n <TourOverlay />\n <TourCard />\n </TourProvider>\n )\n}\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1 +1,106 @@
|
|
|
1
|
-
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Tour as Tour$1, TourStep as TourStep$1 } from '@tour-kit/core';
|
|
3
|
+
export { A11yConfig, Alignment, BeaconPosition, HintConfig, HintState, HintsState, KeyboardConfig, PersistenceConfig, Placement, Position, Rect, ScrollConfig, Side, SpotlightConfig, StepOptions, Storage, TourCallbackContext, Tour as TourConfig, TourContext, TourKitConfig, TourKitContext, TourKitProvider, TourOptions, TourProvider, TourState, TourStep as TourStepConfig, UseFocusTrapReturn, UsePersistenceReturn, UseSpotlightReturn, UseStepReturn, UseTourReturn, announce, calculatePosition, createPrefixedStorage, createStep, createStorageAdapter, createTour, defaultA11yConfig, defaultKeyboardConfig, defaultPersistenceConfig, defaultScrollConfig, defaultSpotlightConfig, generateId, getScrollParent, getStepAnnouncement, isElementVisible, prefersReducedMotion, safeJSONParse, scrollIntoView, useElementPosition, useFocusTrap, useKeyboardNavigation, useMediaQuery, usePersistence, usePrefersReducedMotion, useSpotlight, useStep, useTour, waitForElement } from '@tour-kit/core';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { FloatingContext } from '@floating-ui/react';
|
|
6
|
+
import { ClassValue } from 'clsx';
|
|
7
|
+
|
|
8
|
+
interface TourProps {
|
|
9
|
+
id: string;
|
|
10
|
+
autoStart?: boolean;
|
|
11
|
+
config?: Omit<Tour$1, 'id' | 'steps'>;
|
|
12
|
+
onStart?: () => void;
|
|
13
|
+
onComplete?: () => void;
|
|
14
|
+
onSkip?: () => void;
|
|
15
|
+
onStepChange?: (step: TourStep$1, index: number) => void;
|
|
16
|
+
children: React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
declare function Tour({ id, autoStart, config, onStart, onComplete, onSkip, onStepChange, children, }: TourProps): react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
declare function TourStep(_props: TourStep$1): null;
|
|
21
|
+
declare namespace TourStep {
|
|
22
|
+
var displayName: string;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
interface TourCardProps {
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
declare function TourCard({ className }: TourCardProps): react_jsx_runtime.JSX.Element | null;
|
|
29
|
+
|
|
30
|
+
interface TourCardHeaderProps {
|
|
31
|
+
title?: React.ReactNode;
|
|
32
|
+
titleId: string;
|
|
33
|
+
showClose?: boolean;
|
|
34
|
+
className?: string;
|
|
35
|
+
}
|
|
36
|
+
declare function TourCardHeader({ title, titleId, showClose, className, }: TourCardHeaderProps): react_jsx_runtime.JSX.Element | null;
|
|
37
|
+
|
|
38
|
+
interface TourCardContentProps {
|
|
39
|
+
content: React.ReactNode;
|
|
40
|
+
className?: string;
|
|
41
|
+
}
|
|
42
|
+
declare function TourCardContent({ content, className }: TourCardContentProps): react_jsx_runtime.JSX.Element;
|
|
43
|
+
|
|
44
|
+
interface TourCardFooterProps {
|
|
45
|
+
currentStep: number;
|
|
46
|
+
totalSteps: number;
|
|
47
|
+
showNavigation?: boolean;
|
|
48
|
+
showProgress?: boolean;
|
|
49
|
+
isFirstStep: boolean;
|
|
50
|
+
isLastStep: boolean;
|
|
51
|
+
onPrev: () => void;
|
|
52
|
+
onNext: () => void;
|
|
53
|
+
onSkip: () => void;
|
|
54
|
+
className?: string;
|
|
55
|
+
}
|
|
56
|
+
declare function TourCardFooter({ currentStep, totalSteps, showNavigation, showProgress, isFirstStep, isLastStep, onPrev, onNext, onSkip, className, }: TourCardFooterProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
interface TourOverlayProps {
|
|
59
|
+
className?: string;
|
|
60
|
+
onClick?: () => void;
|
|
61
|
+
}
|
|
62
|
+
declare function TourOverlay({ className, onClick }: TourOverlayProps): react_jsx_runtime.JSX.Element | null;
|
|
63
|
+
|
|
64
|
+
interface TourProgressProps {
|
|
65
|
+
current: number;
|
|
66
|
+
total: number;
|
|
67
|
+
variant?: 'dots' | 'bar' | 'text';
|
|
68
|
+
className?: string;
|
|
69
|
+
}
|
|
70
|
+
declare function TourProgress({ current, total, variant, className }: TourProgressProps): react_jsx_runtime.JSX.Element;
|
|
71
|
+
|
|
72
|
+
interface TourNavigationProps {
|
|
73
|
+
isFirstStep: boolean;
|
|
74
|
+
isLastStep: boolean;
|
|
75
|
+
onPrev: () => void;
|
|
76
|
+
onNext: () => void;
|
|
77
|
+
onSkip?: () => void;
|
|
78
|
+
className?: string;
|
|
79
|
+
prevLabel?: string;
|
|
80
|
+
nextLabel?: string;
|
|
81
|
+
finishLabel?: string;
|
|
82
|
+
skipLabel?: string;
|
|
83
|
+
}
|
|
84
|
+
declare function TourNavigation({ isFirstStep, isLastStep, onPrev, onNext, onSkip, className, prevLabel, nextLabel, finishLabel, skipLabel, }: TourNavigationProps): react_jsx_runtime.JSX.Element;
|
|
85
|
+
|
|
86
|
+
interface TourCloseProps {
|
|
87
|
+
className?: string;
|
|
88
|
+
'aria-label'?: string;
|
|
89
|
+
}
|
|
90
|
+
declare function TourClose({ className, 'aria-label': ariaLabel }: TourCloseProps): react_jsx_runtime.JSX.Element;
|
|
91
|
+
|
|
92
|
+
interface TourPortalProps {
|
|
93
|
+
children: React.ReactNode;
|
|
94
|
+
container?: HTMLElement;
|
|
95
|
+
}
|
|
96
|
+
declare function TourPortal({ children, container }: TourPortalProps): React.ReactPortal | null;
|
|
97
|
+
|
|
98
|
+
interface TourArrowProps {
|
|
99
|
+
context: FloatingContext;
|
|
100
|
+
className?: string;
|
|
101
|
+
}
|
|
102
|
+
declare const TourArrow: React.ForwardRefExoticComponent<TourArrowProps & React.RefAttributes<SVGSVGElement>>;
|
|
103
|
+
|
|
104
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
105
|
+
|
|
106
|
+
export { Tour, TourArrow, TourCard, TourCardContent, TourCardFooter, TourCardHeader, TourClose, TourNavigation, TourOverlay, TourPortal, TourProgress, TourStep, cn };
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1,106 @@
|
|
|
1
|
-
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Tour as Tour$1, TourStep as TourStep$1 } from '@tour-kit/core';
|
|
3
|
+
export { A11yConfig, Alignment, BeaconPosition, HintConfig, HintState, HintsState, KeyboardConfig, PersistenceConfig, Placement, Position, Rect, ScrollConfig, Side, SpotlightConfig, StepOptions, Storage, TourCallbackContext, Tour as TourConfig, TourContext, TourKitConfig, TourKitContext, TourKitProvider, TourOptions, TourProvider, TourState, TourStep as TourStepConfig, UseFocusTrapReturn, UsePersistenceReturn, UseSpotlightReturn, UseStepReturn, UseTourReturn, announce, calculatePosition, createPrefixedStorage, createStep, createStorageAdapter, createTour, defaultA11yConfig, defaultKeyboardConfig, defaultPersistenceConfig, defaultScrollConfig, defaultSpotlightConfig, generateId, getScrollParent, getStepAnnouncement, isElementVisible, prefersReducedMotion, safeJSONParse, scrollIntoView, useElementPosition, useFocusTrap, useKeyboardNavigation, useMediaQuery, usePersistence, usePrefersReducedMotion, useSpotlight, useStep, useTour, waitForElement } from '@tour-kit/core';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { FloatingContext } from '@floating-ui/react';
|
|
6
|
+
import { ClassValue } from 'clsx';
|
|
7
|
+
|
|
8
|
+
interface TourProps {
|
|
9
|
+
id: string;
|
|
10
|
+
autoStart?: boolean;
|
|
11
|
+
config?: Omit<Tour$1, 'id' | 'steps'>;
|
|
12
|
+
onStart?: () => void;
|
|
13
|
+
onComplete?: () => void;
|
|
14
|
+
onSkip?: () => void;
|
|
15
|
+
onStepChange?: (step: TourStep$1, index: number) => void;
|
|
16
|
+
children: React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
declare function Tour({ id, autoStart, config, onStart, onComplete, onSkip, onStepChange, children, }: TourProps): react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
declare function TourStep(_props: TourStep$1): null;
|
|
21
|
+
declare namespace TourStep {
|
|
22
|
+
var displayName: string;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
interface TourCardProps {
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
declare function TourCard({ className }: TourCardProps): react_jsx_runtime.JSX.Element | null;
|
|
29
|
+
|
|
30
|
+
interface TourCardHeaderProps {
|
|
31
|
+
title?: React.ReactNode;
|
|
32
|
+
titleId: string;
|
|
33
|
+
showClose?: boolean;
|
|
34
|
+
className?: string;
|
|
35
|
+
}
|
|
36
|
+
declare function TourCardHeader({ title, titleId, showClose, className, }: TourCardHeaderProps): react_jsx_runtime.JSX.Element | null;
|
|
37
|
+
|
|
38
|
+
interface TourCardContentProps {
|
|
39
|
+
content: React.ReactNode;
|
|
40
|
+
className?: string;
|
|
41
|
+
}
|
|
42
|
+
declare function TourCardContent({ content, className }: TourCardContentProps): react_jsx_runtime.JSX.Element;
|
|
43
|
+
|
|
44
|
+
interface TourCardFooterProps {
|
|
45
|
+
currentStep: number;
|
|
46
|
+
totalSteps: number;
|
|
47
|
+
showNavigation?: boolean;
|
|
48
|
+
showProgress?: boolean;
|
|
49
|
+
isFirstStep: boolean;
|
|
50
|
+
isLastStep: boolean;
|
|
51
|
+
onPrev: () => void;
|
|
52
|
+
onNext: () => void;
|
|
53
|
+
onSkip: () => void;
|
|
54
|
+
className?: string;
|
|
55
|
+
}
|
|
56
|
+
declare function TourCardFooter({ currentStep, totalSteps, showNavigation, showProgress, isFirstStep, isLastStep, onPrev, onNext, onSkip, className, }: TourCardFooterProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
interface TourOverlayProps {
|
|
59
|
+
className?: string;
|
|
60
|
+
onClick?: () => void;
|
|
61
|
+
}
|
|
62
|
+
declare function TourOverlay({ className, onClick }: TourOverlayProps): react_jsx_runtime.JSX.Element | null;
|
|
63
|
+
|
|
64
|
+
interface TourProgressProps {
|
|
65
|
+
current: number;
|
|
66
|
+
total: number;
|
|
67
|
+
variant?: 'dots' | 'bar' | 'text';
|
|
68
|
+
className?: string;
|
|
69
|
+
}
|
|
70
|
+
declare function TourProgress({ current, total, variant, className }: TourProgressProps): react_jsx_runtime.JSX.Element;
|
|
71
|
+
|
|
72
|
+
interface TourNavigationProps {
|
|
73
|
+
isFirstStep: boolean;
|
|
74
|
+
isLastStep: boolean;
|
|
75
|
+
onPrev: () => void;
|
|
76
|
+
onNext: () => void;
|
|
77
|
+
onSkip?: () => void;
|
|
78
|
+
className?: string;
|
|
79
|
+
prevLabel?: string;
|
|
80
|
+
nextLabel?: string;
|
|
81
|
+
finishLabel?: string;
|
|
82
|
+
skipLabel?: string;
|
|
83
|
+
}
|
|
84
|
+
declare function TourNavigation({ isFirstStep, isLastStep, onPrev, onNext, onSkip, className, prevLabel, nextLabel, finishLabel, skipLabel, }: TourNavigationProps): react_jsx_runtime.JSX.Element;
|
|
85
|
+
|
|
86
|
+
interface TourCloseProps {
|
|
87
|
+
className?: string;
|
|
88
|
+
'aria-label'?: string;
|
|
89
|
+
}
|
|
90
|
+
declare function TourClose({ className, 'aria-label': ariaLabel }: TourCloseProps): react_jsx_runtime.JSX.Element;
|
|
91
|
+
|
|
92
|
+
interface TourPortalProps {
|
|
93
|
+
children: React.ReactNode;
|
|
94
|
+
container?: HTMLElement;
|
|
95
|
+
}
|
|
96
|
+
declare function TourPortal({ children, container }: TourPortalProps): React.ReactPortal | null;
|
|
97
|
+
|
|
98
|
+
interface TourArrowProps {
|
|
99
|
+
context: FloatingContext;
|
|
100
|
+
className?: string;
|
|
101
|
+
}
|
|
102
|
+
declare const TourArrow: React.ForwardRefExoticComponent<TourArrowProps & React.RefAttributes<SVGSVGElement>>;
|
|
103
|
+
|
|
104
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
105
|
+
|
|
106
|
+
export { Tour, TourArrow, TourCard, TourCardContent, TourCardFooter, TourCardHeader, TourClose, TourNavigation, TourOverlay, TourPortal, TourProgress, TourStep, cn };
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
1
|
+
import {useTour,useFocusTrap,useSpotlight,usePrefersReducedMotion,TourProvider}from'@tour-kit/core';export{TourContext,TourKitContext,TourKitProvider,TourProvider,announce,calculatePosition,createPrefixedStorage,createStep,createStorageAdapter,createTour,defaultA11yConfig,defaultKeyboardConfig,defaultPersistenceConfig,defaultScrollConfig,defaultSpotlightConfig,generateId,getScrollParent,getStepAnnouncement,isElementVisible,prefersReducedMotion,safeJSONParse,scrollIntoView,useElementPosition,useFocusTrap,useKeyboardNavigation,useMediaQuery,usePersistence,usePrefersReducedMotion,useSpotlight,useStep,useTour,waitForElement}from'@tour-kit/core';import*as g from'react';import {FloatingArrow,useFloating,autoUpdate,offset,flip,shift,arrow}from'@floating-ui/react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';import {createPortal}from'react-dom';function n(...t){return twMerge(clsx(t))}var S=g.forwardRef(({context:t,className:o},e)=>jsx(FloatingArrow,{ref:e,context:t,className:o,fill:"hsl(var(--popover))",stroke:"hsl(var(--border))",strokeWidth:1}));S.displayName="TourArrow";function v({children:t,container:o}){let[e,r]=g.useState(false);return g.useEffect(()=>{r(true);},[]),e?createPortal(t,o??document.body):null}function R({content:t,className:o}){return jsx("div",{className:n("py-3 text-sm text-muted-foreground",o),children:t})}function k({isFirstStep:t,isLastStep:o,onPrev:e,onNext:r,onSkip:i,className:a,prevLabel:s="Back",nextLabel:u="Next",finishLabel:l="Finish",skipLabel:p="Skip"}){return jsxs("div",{className:n("flex items-center gap-2",a),children:[i&&!o&&jsx("button",{type:"button",onClick:i,className:"text-sm text-muted-foreground hover:text-foreground transition-colors",children:p}),!t&&jsx("button",{type:"button",onClick:e,className:"inline-flex items-center justify-center rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors",children:s}),jsx("button",{type:"button",onClick:r,className:"inline-flex items-center justify-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",children:o?l:u})]})}function F({current:t,total:o,variant:e="dots",className:r}){if(e==="text")return jsxs("span",{className:n("text-sm text-muted-foreground",r),children:[t," of ",o]});if(e==="bar"){let i=t/o*100;return jsx("div",{className:n("h-1.5 w-20 overflow-hidden rounded-full bg-secondary",r),children:jsx("div",{className:"h-full bg-primary transition-all duration-300",style:{width:`${i}%`}})})}return jsx("div",{className:n("flex gap-1",r),children:Array.from({length:o},(i,a)=>jsx("div",{className:n("h-2 w-2 rounded-full transition-colors",a+1===t?"bg-primary":"bg-secondary")},a))})}function E({currentStep:t,totalSteps:o,showNavigation:e=true,showProgress:r=true,isFirstStep:i,isLastStep:a,onPrev:s,onNext:u,onSkip:l,className:p}){return jsxs("div",{className:n("flex items-center justify-between pt-2",p),children:[r&&jsx(F,{current:t,total:o}),e&&jsx(k,{isFirstStep:i,isLastStep:a,onPrev:s,onNext:u,onSkip:l})]})}function A({className:t,"aria-label":o="Close tour"}){let{skip:e}=useTour();return jsx("button",{type:"button",onClick:e,className:n("rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",t),"aria-label":o,children:jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[jsx("path",{d:"M18 6 6 18"}),jsx("path",{d:"m6 6 12 12"})]})})}function L({title:t,titleId:o,showClose:e=true,className:r}){return !t&&!e?null:jsxs("div",{className:n("flex items-start justify-between gap-2",r),children:[t&&jsx("h3",{id:o,className:"font-semibold leading-none tracking-tight",children:t}),e&&jsx(A,{})]})}function me(t){return t?t.replace("-center",""):"bottom"}function H({className:t}){let{isActive:o,currentStep:e,currentStepIndex:r,totalSteps:i,next:a,prev:s,skip:u,isFirstStep:l,isLastStep:p}=useTour(),c=g.useRef(null),{containerRef:f,activate:m,deactivate:d}=useFocusTrap(o),h=g.useMemo(()=>e?.target?typeof e.target=="string"?document.querySelector(e.target):e.target.current:null,[e?.target]),{refs:N,floatingStyles:$,context:q}=useFloating({open:o,placement:me(e?.placement),middleware:[offset(e?.offset?.[1]??12),flip({fallbackAxisSideDirection:"start"}),shift({padding:8}),arrow({element:c})],whileElementsMounted:autoUpdate});if(g.useEffect(()=>{h&&N.setReference(h);},[h,N]),g.useEffect(()=>{o?m():d();},[o,m,d]),!o||!e)return null;let z=e.showNavigation??true,W=e.showClose??true,_=e.showProgress??true;return jsx(v,{children:jsxs("div",{ref:K=>{N.setFloating(K),f&&(f.current=K);},style:$,className:n("z-50 w-80 rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg",e.className,t),role:"dialog","aria-modal":"true","aria-labelledby":`tour-step-title-${e.id}`,children:[jsx(L,{title:e.title,titleId:`tour-step-title-${e.id}`,showClose:W}),jsx(R,{content:e.content}),jsx(E,{currentStep:r+1,totalSteps:i,showNavigation:z,showProgress:_,isFirstStep:l,isLastStep:p,onPrev:s,onNext:a,onSkip:u}),jsx(S,{ref:c,context:q})]})})}function V({className:t,onClick:o}){let{isActive:e,currentStep:r}=useTour(),{overlayStyle:i,cutoutStyle:a,show:s,hide:u,targetRect:l}=useSpotlight(),p=usePrefersReducedMotion(),c=g.useMemo(()=>r?.target?typeof r.target=="string"?document.querySelector(r.target):r.target.current:null,[r?.target]);return g.useEffect(()=>{e&&c?s(c,{padding:r?.spotlightPadding,borderRadius:r?.spotlightRadius,animate:!p}):u();},[e,c,r,s,u,p]),e?jsx(v,{children:jsx("div",{className:n("fixed inset-0 z-40",t),style:i,onClick:o,"aria-hidden":"true",children:l&&jsx("div",{className:"absolute bg-transparent",style:{...a,pointerEvents:r?.interactive?"auto":"none"}})})}):null}function C(t){return null}C.displayName="TourStep";function Se({id:t,autoStart:o=false,config:e,onStart:r,onComplete:i,onSkip:a,onStepChange:s,children:u}){let{steps:l,content:p}=g.useMemo(()=>{let f=[],m=[];return g.Children.forEach(u,d=>{g.isValidElement(d)&&d.type===C?f.push(d.props):m.push(d);}),{steps:f,content:m}},[u]),c={id:t,steps:l,autoStart:o,...e,onStart:r?()=>r():void 0,onComplete:i?()=>i():void 0,onSkip:a?()=>a():void 0,onStepChange:s?(f,m)=>s(f,m):void 0};return jsxs(TourProvider,{tours:[c],children:[p,jsx(V,{}),jsx(H,{})]})}
|
|
2
|
+
export{Se as Tour,S as TourArrow,H as TourCard,R as TourCardContent,E as TourCardFooter,L as TourCardHeader,A as TourClose,k as TourNavigation,V as TourOverlay,v as TourPortal,F as TourProgress,C as TourStep,n as cn};//# sourceMappingURL=index.js.map
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Re-export types from core\nexport * from '@tour-kit/core'\n"],"mappings":";AACA,cAAc;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/cn.ts","../src/components/primitives/tour-arrow.tsx","../src/components/primitives/tour-portal.tsx","../src/components/card/tour-card-content.tsx","../src/components/navigation/tour-navigation.tsx","../src/components/navigation/tour-progress.tsx","../src/components/card/tour-card-footer.tsx","../src/components/navigation/tour-close.tsx","../src/components/card/tour-card-header.tsx","../src/components/card/tour-card.tsx","../src/components/overlay/tour-overlay.tsx","../src/components/tour/tour-step.tsx","../src/components/tour/tour.tsx"],"names":["cn","inputs","twMerge","clsx","TourArrow","U","context","className","ref","jsx","FloatingArrow","TourPortal","children","container","mounted","setMounted","P","createPortal","TourCardContent","content","TourNavigation","isFirstStep","isLastStep","onPrev","onNext","onSkip","prevLabel","nextLabel","finishLabel","skipLabel","jsxs","TourProgress","current","total","variant","percentage","_","i","TourCardFooter","currentStep","totalSteps","showNavigation","showProgress","TourClose","ariaLabel","skip","useTour","TourCardHeader","title","titleId","showClose","toFloatingPlacement","placement","TourCard","isActive","currentStepIndex","next","prev","arrowRef","containerRef","activate","deactivate","useFocusTrap","targetElement","refs","floatingStyles","useFloating","offset","flip","shift","arrow","autoUpdate","node","TourOverlay","onClick","overlayStyle","cutoutStyle","show","hide","targetRect","useSpotlight","prefersReducedMotion","usePrefersReducedMotion","x","TourStep","_props","Tour","id","autoStart","config","onStart","onComplete","onStepChange","steps","T","stepElements","contentElements","child","tour","step","index","TourProvider"],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs))\n}\n","import { FloatingArrow } from '@floating-ui/react'\nimport type { FloatingContext } from '@floating-ui/react'\nimport * as React from 'react'\n\ninterface TourArrowProps {\n context: FloatingContext\n className?: string\n}\n\nexport const TourArrow = React.forwardRef<SVGSVGElement, TourArrowProps>(\n ({ context, className }, ref) => {\n return (\n <FloatingArrow\n ref={ref}\n context={context}\n className={className}\n fill=\"hsl(var(--popover))\"\n stroke=\"hsl(var(--border))\"\n strokeWidth={1}\n />\n )\n }\n)\n\nTourArrow.displayName = 'TourArrow'\n","import * as React from 'react'\nimport { createPortal } from 'react-dom'\n\ninterface TourPortalProps {\n children: React.ReactNode\n container?: HTMLElement\n}\n\nexport function TourPortal({ children, container }: TourPortalProps) {\n const [mounted, setMounted] = React.useState(false)\n\n React.useEffect(() => {\n setMounted(true)\n }, [])\n\n if (!mounted) return null\n\n return createPortal(children, container ?? document.body)\n}\n","import type * as React from 'react'\nimport { cn } from '../../utils/cn'\n\ninterface TourCardContentProps {\n content: React.ReactNode\n className?: string\n}\n\nexport function TourCardContent({ content, className }: TourCardContentProps) {\n return <div className={cn('py-3 text-sm text-muted-foreground', className)}>{content}</div>\n}\n","import { cn } from '../../utils/cn'\n\ninterface TourNavigationProps {\n isFirstStep: boolean\n isLastStep: boolean\n onPrev: () => void\n onNext: () => void\n onSkip?: () => void\n className?: string\n prevLabel?: string\n nextLabel?: string\n finishLabel?: string\n skipLabel?: string\n}\n\nexport function TourNavigation({\n isFirstStep,\n isLastStep,\n onPrev,\n onNext,\n onSkip,\n className,\n prevLabel = 'Back',\n nextLabel = 'Next',\n finishLabel = 'Finish',\n skipLabel = 'Skip',\n}: TourNavigationProps) {\n return (\n <div className={cn('flex items-center gap-2', className)}>\n {onSkip && !isLastStep && (\n <button\n type=\"button\"\n onClick={onSkip}\n className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\"\n >\n {skipLabel}\n </button>\n )}\n {!isFirstStep && (\n <button\n type=\"button\"\n onClick={onPrev}\n className=\"inline-flex items-center justify-center rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors\"\n >\n {prevLabel}\n </button>\n )}\n <button\n type=\"button\"\n onClick={onNext}\n className=\"inline-flex items-center justify-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors\"\n >\n {isLastStep ? finishLabel : nextLabel}\n </button>\n </div>\n )\n}\n","import { cn } from '../../utils/cn'\n\ninterface TourProgressProps {\n current: number\n total: number\n variant?: 'dots' | 'bar' | 'text'\n className?: string\n}\n\nexport function TourProgress({ current, total, variant = 'dots', className }: TourProgressProps) {\n if (variant === 'text') {\n return (\n <span className={cn('text-sm text-muted-foreground', className)}>\n {current} of {total}\n </span>\n )\n }\n\n if (variant === 'bar') {\n const percentage = (current / total) * 100\n return (\n <div className={cn('h-1.5 w-20 overflow-hidden rounded-full bg-secondary', className)}>\n <div\n className=\"h-full bg-primary transition-all duration-300\"\n style={{ width: `${percentage}%` }}\n />\n </div>\n )\n }\n\n return (\n <div className={cn('flex gap-1', className)}>\n {Array.from({ length: total }, (_, i) => (\n <div\n key={i}\n className={cn(\n 'h-2 w-2 rounded-full transition-colors',\n i + 1 === current ? 'bg-primary' : 'bg-secondary'\n )}\n />\n ))}\n </div>\n )\n}\n","import { cn } from '../../utils/cn'\nimport { TourNavigation } from '../navigation/tour-navigation'\nimport { TourProgress } from '../navigation/tour-progress'\n\ninterface TourCardFooterProps {\n currentStep: number\n totalSteps: number\n showNavigation?: boolean\n showProgress?: boolean\n isFirstStep: boolean\n isLastStep: boolean\n onPrev: () => void\n onNext: () => void\n onSkip: () => void\n className?: string\n}\n\nexport function TourCardFooter({\n currentStep,\n totalSteps,\n showNavigation = true,\n showProgress = true,\n isFirstStep,\n isLastStep,\n onPrev,\n onNext,\n onSkip,\n className,\n}: TourCardFooterProps) {\n return (\n <div className={cn('flex items-center justify-between pt-2', className)}>\n {showProgress && <TourProgress current={currentStep} total={totalSteps} />}\n {showNavigation && (\n <TourNavigation\n isFirstStep={isFirstStep}\n isLastStep={isLastStep}\n onPrev={onPrev}\n onNext={onNext}\n onSkip={onSkip}\n />\n )}\n </div>\n )\n}\n","import { useTour } from '@tour-kit/core'\nimport { cn } from '../../utils/cn'\n\ninterface TourCloseProps {\n className?: string\n 'aria-label'?: string\n}\n\nexport function TourClose({ className, 'aria-label': ariaLabel = 'Close tour' }: TourCloseProps) {\n const { skip } = useTour()\n\n return (\n <button\n type=\"button\"\n onClick={skip}\n className={cn(\n 'rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n className\n )}\n aria-label={ariaLabel}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n )\n}\n","import type * as React from 'react'\nimport { cn } from '../../utils/cn'\nimport { TourClose } from '../navigation/tour-close'\n\ninterface TourCardHeaderProps {\n title?: React.ReactNode\n titleId: string\n showClose?: boolean\n className?: string\n}\n\nexport function TourCardHeader({\n title,\n titleId,\n showClose = true,\n className,\n}: TourCardHeaderProps) {\n if (!title && !showClose) return null\n\n return (\n <div className={cn('flex items-start justify-between gap-2', className)}>\n {title && (\n <h3 id={titleId} className=\"font-semibold leading-none tracking-tight\">\n {title}\n </h3>\n )}\n {showClose && <TourClose />}\n </div>\n )\n}\n","import {\n type Placement as FloatingPlacement,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n useFloating,\n} from '@floating-ui/react'\nimport { type Placement, useFocusTrap, useTour } from '@tour-kit/core'\nimport * as React from 'react'\nimport { cn } from '../../utils/cn'\nimport { TourArrow } from '../primitives/tour-arrow'\nimport { TourPortal } from '../primitives/tour-portal'\nimport { TourCardContent } from './tour-card-content'\nimport { TourCardFooter } from './tour-card-footer'\nimport { TourCardHeader } from './tour-card-header'\n\n// Map our Placement type to floating-ui Placement (center -> no suffix)\nfunction toFloatingPlacement(placement?: Placement): FloatingPlacement {\n if (!placement) return 'bottom'\n // floating-ui uses 'top' instead of 'top-center', etc.\n return placement.replace('-center', '') as FloatingPlacement\n}\n\ninterface TourCardProps {\n className?: string\n}\n\nexport function TourCard({ className }: TourCardProps) {\n const {\n isActive,\n currentStep,\n currentStepIndex,\n totalSteps,\n next,\n prev,\n skip,\n isFirstStep,\n isLastStep,\n } = useTour()\n\n const arrowRef = React.useRef<SVGSVGElement>(null)\n const { containerRef, activate, deactivate } = useFocusTrap(isActive)\n\n const targetElement = React.useMemo(() => {\n if (!currentStep?.target) return null\n if (typeof currentStep.target === 'string') {\n return document.querySelector<HTMLElement>(currentStep.target)\n }\n return currentStep.target.current\n }, [currentStep?.target])\n\n const { refs, floatingStyles, context } = useFloating({\n open: isActive,\n placement: toFloatingPlacement(currentStep?.placement),\n middleware: [\n offset(currentStep?.offset?.[1] ?? 12),\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ padding: 8 }),\n arrow({ element: arrowRef }),\n ],\n whileElementsMounted: autoUpdate,\n })\n\n React.useEffect(() => {\n if (targetElement) {\n refs.setReference(targetElement)\n }\n }, [targetElement, refs])\n\n React.useEffect(() => {\n if (isActive) {\n activate()\n } else {\n deactivate()\n }\n }, [isActive, activate, deactivate])\n\n if (!isActive || !currentStep) return null\n\n const showNavigation = currentStep.showNavigation ?? true\n const showClose = currentStep.showClose ?? true\n const showProgress = currentStep.showProgress ?? true\n\n return (\n <TourPortal>\n <div\n ref={(node) => {\n refs.setFloating(node)\n if (containerRef) {\n ;(containerRef as React.MutableRefObject<HTMLElement | null>).current = node\n }\n }}\n style={floatingStyles}\n className={cn(\n 'z-50 w-80 rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg',\n currentStep.className,\n className\n )}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={`tour-step-title-${currentStep.id}`}\n >\n <TourCardHeader\n title={currentStep.title}\n titleId={`tour-step-title-${currentStep.id}`}\n showClose={showClose}\n />\n\n <TourCardContent content={currentStep.content} />\n\n <TourCardFooter\n currentStep={currentStepIndex + 1}\n totalSteps={totalSteps}\n showNavigation={showNavigation}\n showProgress={showProgress}\n isFirstStep={isFirstStep}\n isLastStep={isLastStep}\n onPrev={prev}\n onNext={next}\n onSkip={skip}\n />\n\n <TourArrow ref={arrowRef} context={context} />\n </div>\n </TourPortal>\n )\n}\n","import { usePrefersReducedMotion, useSpotlight, useTour } from '@tour-kit/core'\nimport * as React from 'react'\nimport { cn } from '../../utils/cn'\nimport { TourPortal } from '../primitives/tour-portal'\n\ninterface TourOverlayProps {\n className?: string\n onClick?: () => void\n}\n\nexport function TourOverlay({ className, onClick }: TourOverlayProps) {\n const { isActive, currentStep } = useTour()\n const { overlayStyle, cutoutStyle, show, hide, targetRect } = useSpotlight()\n const prefersReducedMotion = usePrefersReducedMotion()\n\n const targetElement = React.useMemo(() => {\n if (!currentStep?.target) return null\n if (typeof currentStep.target === 'string') {\n return document.querySelector<HTMLElement>(currentStep.target)\n }\n return currentStep.target.current\n }, [currentStep?.target])\n\n React.useEffect(() => {\n if (isActive && targetElement) {\n show(targetElement, {\n padding: currentStep?.spotlightPadding,\n borderRadius: currentStep?.spotlightRadius,\n animate: !prefersReducedMotion,\n })\n } else {\n hide()\n }\n }, [isActive, targetElement, currentStep, show, hide, prefersReducedMotion])\n\n if (!isActive) return null\n\n return (\n <TourPortal>\n <div\n className={cn('fixed inset-0 z-40', className)}\n style={overlayStyle}\n onClick={onClick}\n aria-hidden=\"true\"\n >\n {targetRect && (\n <div\n className=\"absolute bg-transparent\"\n style={{\n ...cutoutStyle,\n pointerEvents: currentStep?.interactive ? 'auto' : 'none',\n }}\n />\n )}\n </div>\n </TourPortal>\n )\n}\n","import type { TourStep as TourStepType } from '@tour-kit/core'\n\nexport function TourStep(_props: TourStepType): null {\n return null\n}\n\nTourStep.displayName = 'TourStep'\n","import { TourProvider, type TourStep as TourStepType, type Tour as TourType } from '@tour-kit/core'\nimport * as React from 'react'\nimport { TourCard } from '../card/tour-card'\nimport { TourOverlay } from '../overlay/tour-overlay'\nimport { TourStep } from './tour-step'\n\ninterface TourProps {\n id: string\n autoStart?: boolean\n config?: Omit<TourType, 'id' | 'steps'>\n onStart?: () => void\n onComplete?: () => void\n onSkip?: () => void\n onStepChange?: (step: TourStepType, index: number) => void\n children: React.ReactNode\n}\n\nexport function Tour({\n id,\n autoStart = false,\n config,\n onStart,\n onComplete,\n onSkip,\n onStepChange,\n children,\n}: TourProps) {\n const { steps, content } = React.useMemo(() => {\n const stepElements: TourStepType[] = []\n const contentElements: React.ReactNode[] = []\n\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) && child.type === TourStep) {\n stepElements.push(child.props as TourStepType)\n } else {\n contentElements.push(child)\n }\n })\n\n return { steps: stepElements, content: contentElements }\n }, [children])\n\n const tour: TourType = {\n id,\n steps,\n autoStart,\n ...config,\n onStart: onStart ? () => onStart() : undefined,\n onComplete: onComplete ? () => onComplete() : undefined,\n onSkip: onSkip ? () => onSkip() : undefined,\n onStepChange: onStepChange ? (step, index) => onStepChange(step, index) : undefined,\n }\n\n return (\n <TourProvider tours={[tour]}>\n {content}\n <TourOverlay />\n <TourCard />\n </TourProvider>\n )\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tour-kit/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Headless onboarding and product tour library for React - React components",
|
|
5
5
|
"author": "Tour Kit Team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -53,7 +53,10 @@
|
|
|
53
53
|
"registry": "https://registry.npmjs.org/"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@
|
|
56
|
+
"@floating-ui/react": "^0.26.0",
|
|
57
|
+
"clsx": "^2.1.0",
|
|
58
|
+
"tailwind-merge": "^2.3.0",
|
|
59
|
+
"@tour-kit/core": "0.3.0"
|
|
57
60
|
},
|
|
58
61
|
"peerDependencies": {
|
|
59
62
|
"react": "^18.0.0 || >=19.2.0",
|