userTourKit — @tour-kit/surveys Context File Version: 3.0.5 | Generated: 2026-05-26 Paste this into your LLM to get accurate answers about @tour-kit/surveys. ========================================================================= OVERVIEW -------- React in-app microsurveys — NPS, CSAT, CES with skip logic, audience targeting, fatigue prevention and 5 display modes. INSTALLATION ------------ npm install @tour-kit/surveys # or pnpm add @tour-kit/surveys Peer dependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 tailwindcss: ^3.4.0 || ^4.0.0 @mui/base: catalog: @tour-kit/scheduling: workspace:* EXPORTS ------- Types: SurveyConfig SurveyState SurveyType DisplayMode SurveyPriority FrequencyRule DismissalReason SurveyStorageAdapter ModalOptions SlideoutOptions BannerOptions PopoverOptions AudienceCondition SlideoutPosition BannerPosition PopoverPosition QuestionConfig QuestionType AnswerValue SkipLogic RatingScale SelectOption NPSResult CSATResult CESResult SurveysContextValue SurveysProviderProps SurveyEvent SurveyEventType BaseSurveyEvent SurveyShownEvent SurveyDismissedEvent SurveySnoozedEvent SurveyCompletedEvent SurveyQuestionAnsweredEvent SurveyScoreCalculatedEvent SurveyQueueConfig SurveyQueueItem PriorityOrder StackBehavior NpsCategory CesCategory CsatModalProps NpsModalProps CesModalProps QuestionRatingProps QuestionTextProps QuestionSelectProps QuestionBooleanProps QuestionMediaProps SurveyProgressProps Hooks: useSurveysContext useSurvey useSurveys useSurveyScoring useReducedMotion Components: SurveysProvider SurveyPopover SurveyModal SurveySlideout SurveyBanner SurveyInline CsatModal NpsModal CesModal QuestionRating QuestionText QuestionSelect QuestionBoolean QuestionMedia SurveyProgress Utilities: calculateNPS calculateCSAT calculateCES computeNpsCategory computeCesCategory ratingOptionVariants textInputVariants selectOptionVariants booleanOptionVariants progressBarVariants modalContentVariants modalOverlayVariants slideoutContentVariants slideoutOverlayVariants TYPES ----- /** Survey measurement types */ export type SurveyType = 'nps' | 'csat' | 'ces' | 'custom' /** Display mode variants */ export type DisplayMode = 'popover' | 'modal' | 'slideout' | 'banner' | 'inline' /** Survey priority levels for queue ordering */ export type SurveyPriority = 'critical' | 'high' | 'normal' | 'low' /** Frequency rules for how often a survey can be shown */ export type FrequencyRule = | 'once' | 'session' | 'always' | { type: 'times'; count: number } /** Position options for slideout variant */ export type SlideoutPosition = 'left' | 'right' /** Position options for banner variant */ export type BannerPosition = 'top' | 'bottom' /** Position options for popover variant */ export type PopoverPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' /** Modal variant options */ export interface ModalOptions { size?: 'sm' | 'md' | 'lg' closeOnOverlayClick?: boolean closeOnEscape?: boolean showCloseButton?: boolean } /** Slideout variant options */ export interface SlideoutOptions { position?: SlideoutPosition size?: 'sm' | 'md' | 'lg' closeOnOverlayClick?: boolean closeOnEscape?: boolean showCloseButton?: boolean } /** Banner variant options */ export interface BannerOptions { position?: BannerPosition sticky?: boolean dismissable?: boolean intent?: 'info' | 'feedback' } /** Popover variant options */ export interface PopoverOptions { position?: PopoverPosition offset?: number showCloseButton?: boolean } /** Main survey configuration */ export interface SurveyConfig { /** Unique identifier for the survey */ id: string /** Survey measurement type */ type: SurveyType /** Display mode variant */ displayMode: DisplayMode /** Priority for queue ordering */ priority?: SurveyPriority /** Survey title */ title?: string /** Survey description or intro text */ description?: string | ReactNode /** Ordered list of questions */ questions: import('./question').QuestionConfig[] /** Frequency rule for showing this survey */ frequency?: FrequencyRule /** Schedule configuration (requires @tour-kit/scheduling) */ schedule?: unknown /** Audience targeting conditions */ audience?: AudienceCondition[] /** Global cooldown in days between any survey (overrides provider default) */ globalCooldownDays?: number /** Probability (0-1) that this survey is shown to a given user */ samplingRate?: number /** Maximum times user can snooze this survey */ maxSnoozeCount?: number /** Days before snoozed survey returns */ snoozeDelayDays?: number /** Maximum surveys shown per session (overrides provider default) */ maxPerSession?: number /** Modal variant options */ modalOptions?: ModalOptions /** Slideout variant options */ slideoutOptions?: SlideoutOptions /** Banner variant options */ bannerOptions?: BannerOptions /** Popover variant options */ popoverOptions?: PopoverOptions /** Custom metadata */ metadata?: Record /** Callback when survey is shown */ onShow?: () => void /** Callback when survey is dismissed */ onDismiss?: (reason: DismissalReason) => void /** Callback when survey is completed */ onComplete?: (responses: Map) => void /** Callback when a question is answered */ onAnswer?: (questionId: string, value: import('./question').AnswerValue) => void } /** Survey measurement types */ export type SurveyType = 'nps' | 'csat' | 'ces' | 'custom' /** Display mode variants */ export type DisplayMode = 'popover' | 'modal' | 'slideout' | 'banner' | 'inline' /** Survey priority levels for queue ordering */ export type SurveyPriority = 'critical' | 'high' | 'normal' | 'low' /** Frequency rules for how often a survey can be shown */ export type FrequencyRule = | 'once' | 'session' | 'always' | { type: 'times'; ... and 28 more types. See source for full definitions. HOOKS ----- useSurveysContext(...) useSurvey(...) useSurveys(...) useSurveyScoring(...) useReducedMotion(...) COMPONENTS ---------- EXAMPLES -------- Example 1: Quick Start import { SurveysProvider, SurveyModal, useSurvey } from '@tour-kit/surveys'; const npsConfig = { id: 'nps-q1', type: 'nps', displayMode: 'modal', title: 'How likely are you to recommend us?', questions: [ { id: 'score', type: 'rating', text: 'On a scale of 0 to 10, how likely are you to recommend us to a friend or colleague?', ratingScale: { min: 0, max: 10, labels: { min: 'Not at all likely', max: 'Extremely likely' } }, }, ], onComplete: (responses) => { console.log('NPS score:', responses.get('score')); }, }; function NPSTrigger() { const survey = useSurvey('nps-q1'); return ( <> ); } export function App() { return ( ); } Example 2: Frequency rules frequency?: FrequencyRule // 'once' — shows exactly once per user // 'session' — once per session // 'always' — every time show() is called (ignores cooldown) // { type: 'times', count: 3 } — show up to N times total // { type: 'interval', days: 30 } — show at most once every N days Example 3: Skip logic { id: 'reason', type: 'single-select', text: 'What is your main reason for leaving?', options: [ { value: 'price', label: 'Price' }, { value: 'features', label: 'Missing features' }, { value: 'other', label: 'Other' }, ], skipLogic: [ { questionId: 'reason', condition: (answer) => answer !== 'other', skipTo: 'confirm', // jump over the free-text follow-up }, ], }