gotcha-feedback 1.0.19 → 1.1.1

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/README.md CHANGED
@@ -41,12 +41,15 @@ function FeatureCard() {
41
41
  - **Feedback Mode** - Star rating + text input
42
42
  - **Vote Mode** - Thumbs up/down with customizable labels
43
43
  - **Poll Mode** - Custom options (single or multi-select)
44
+ - **NPS Mode** - 0-10 Net Promoter Score with optional follow-up
45
+ - **Score Component** - Embeddable `<GotchaScore />` to display aggregate ratings inline
46
+ - **Bug Flagging** - Let users flag feedback as issues/bugs with a single toggle
44
47
  - **User Segmentation** - Analyze feedback by custom user attributes
45
48
  - **Edit Support** - Users can update their previous submissions
46
49
  - **Customizable** - Themes, sizes, positions
47
50
  - **Accessible** - Full keyboard navigation and screen reader support
48
51
  - **Animated** - Smooth enter/exit animations with CSS transitions
49
- - **Lightweight** - ~15KB minified
52
+ - **Lightweight** - ~11KB gzipped
50
53
 
51
54
  ## Props
52
55
 
@@ -65,7 +68,7 @@ function FeatureCard() {
65
68
  | Prop | Type | Default | Description |
66
69
  |------|------|---------|-------------|
67
70
  | `elementId` | `string` | Required | Unique identifier for this element |
68
- | `mode` | `'feedback' \| 'vote' \| 'poll'` | `'feedback'` | Feedback mode |
71
+ | `mode` | `'feedback' \| 'vote' \| 'poll' \| 'nps'` | `'feedback'` | Feedback mode |
69
72
  | `position` | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' \| 'inline'` | `'top-right'` | Button position |
70
73
  | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
71
74
  | `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Color theme |
@@ -76,6 +79,13 @@ function FeatureCard() {
76
79
  | `voteLabels` | `{ up: string, down: string }` | `{ up: 'Like', down: 'Dislike' }` | Custom vote button labels |
77
80
  | `options` | `string[]` | - | Poll options (2-6 items, required for poll mode) |
78
81
  | `allowMultiple` | `boolean` | `false` | Allow selecting multiple poll options |
82
+ | `npsQuestion` | `string` | `'How likely are you to recommend us?'` | Custom NPS question |
83
+ | `npsFollowUp` | `boolean` | `true` | Show follow-up textarea after NPS score |
84
+ | `npsFollowUpPlaceholder` | `string` | - | Placeholder for NPS follow-up textarea |
85
+ | `npsLowLabel` | `string` | `'Not likely'` | Label for low end of NPS scale |
86
+ | `npsHighLabel` | `string` | `'Very likely'` | Label for high end of NPS scale |
87
+ | `enableBugFlag` | `boolean` | `false` | Show "Report an issue" toggle in feedback form |
88
+ | `bugFlagLabel` | `string` | `'Report an issue'` | Custom label for the bug flag toggle |
79
89
  | `user` | `object` | - | User metadata for segmentation |
80
90
  | `onSubmit` | `function` | - | Callback after submission |
81
91
  | `onOpen` | `function` | - | Callback when modal opens |
@@ -136,6 +146,40 @@ function FeatureCard() {
136
146
  />
137
147
  ```
138
148
 
149
+ ### NPS Mode
150
+
151
+ ```tsx
152
+ <Gotcha
153
+ elementId="nps-survey"
154
+ mode="nps"
155
+ npsQuestion="How likely are you to recommend us?"
156
+ npsLowLabel="Not likely"
157
+ npsHighLabel="Very likely"
158
+ />
159
+ ```
160
+
161
+ ### Bug Flagging
162
+
163
+ Add a "Report an issue" toggle to any feedback form. When toggled on, the submission is automatically flagged as a bug and creates a ticket in your dashboard.
164
+
165
+ ```tsx
166
+ <Gotcha
167
+ elementId="checkout"
168
+ mode="feedback"
169
+ enableBugFlag
170
+ />
171
+ ```
172
+
173
+ ```tsx
174
+ // Custom label for non-technical users
175
+ <Gotcha
176
+ elementId="portal"
177
+ mode="feedback"
178
+ enableBugFlag
179
+ bugFlagLabel="Something isn't working"
180
+ />
181
+ ```
182
+
139
183
  ### Feedback Field Options
140
184
 
141
185
  By default, feedback mode shows both a star rating and a text input. Use `showText` and `showRating` to control which fields appear.
@@ -310,12 +354,41 @@ When you provide a `user.id`, users can update their previous feedback instead o
310
354
 
311
355
  The modal will show "Update" instead of "Submit" when editing, and previous values will be pre-filled.
312
356
 
357
+ ## GotchaScore Component
358
+
359
+ Display aggregate feedback scores inline — star ratings, vote percentages, or raw numbers.
360
+
361
+ ```tsx
362
+ import { GotchaScore } from 'gotcha-feedback';
363
+
364
+ // Star rating display
365
+ <GotchaScore elementId="feature-card" variant="stars" />
366
+
367
+ // Compact pill (star + number)
368
+ <GotchaScore elementId="feature-card" variant="compact" />
369
+
370
+ // Vote percentage bar
371
+ <GotchaScore elementId="pricing" variant="votes" />
372
+
373
+ // Plain number
374
+ <GotchaScore elementId="feature-card" variant="number" />
375
+ ```
376
+
377
+ ### GotchaScore Props
378
+
379
+ | Prop | Type | Default | Description |
380
+ |------|------|---------|-------------|
381
+ | `elementId` | `string` | Required | Element to show score for |
382
+ | `variant` | `'stars' \| 'number' \| 'compact' \| 'votes'` | `'stars'` | Display variant |
383
+ | `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Color theme |
384
+ | `refreshInterval` | `number` | - | Auto-refresh interval in ms |
385
+
313
386
  ## TypeScript
314
387
 
315
388
  The package includes full TypeScript definitions:
316
389
 
317
390
  ```tsx
318
- import type { GotchaProps, GotchaProviderProps } from 'gotcha-feedback';
391
+ import type { GotchaProps, GotchaProviderProps, ScoreData } from 'gotcha-feedback';
319
392
  ```
320
393
 
321
394
  ## Requirements
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React$1 from 'react';
3
3
 
4
- type ResponseMode = 'feedback' | 'vote' | 'poll';
4
+ type ResponseMode = 'feedback' | 'vote' | 'poll' | 'nps';
5
5
  type VoteType = 'up' | 'down';
6
6
  interface GotchaUser {
7
7
  id?: string;
@@ -16,6 +16,23 @@ interface GotchaStyles {
16
16
  modal?: React.CSSProperties;
17
17
  input?: React.CSSProperties;
18
18
  submitButton?: React.CSSProperties;
19
+ title?: React.CSSProperties;
20
+ closeButton?: React.CSSProperties;
21
+ starRating?: React.CSSProperties;
22
+ star?: React.CSSProperties;
23
+ voteButton?: React.CSSProperties;
24
+ voteButtonSelected?: React.CSSProperties;
25
+ pollOption?: React.CSSProperties;
26
+ pollOptionSelected?: React.CSSProperties;
27
+ npsButton?: React.CSSProperties;
28
+ npsButtonSelected?: React.CSSProperties;
29
+ npsLabels?: React.CSSProperties;
30
+ successMessage?: React.CSSProperties;
31
+ successIcon?: React.CSSProperties;
32
+ errorMessage?: React.CSSProperties;
33
+ bugFlag?: React.CSSProperties;
34
+ backdrop?: React.CSSProperties;
35
+ spinner?: React.CSSProperties;
19
36
  }
20
37
  interface SubmitResponsePayload {
21
38
  elementId: string;
@@ -26,6 +43,7 @@ interface SubmitResponsePayload {
26
43
  vote?: VoteType;
27
44
  pollOptions?: string[];
28
45
  pollSelected?: string[];
46
+ isBug?: boolean;
29
47
  user?: GotchaUser;
30
48
  context?: {
31
49
  url?: string;
@@ -57,7 +75,133 @@ interface GotchaError {
57
75
  message: string;
58
76
  status: number;
59
77
  }
60
- type ErrorCode = 'INVALID_API_KEY' | 'ORIGIN_NOT_ALLOWED' | 'RATE_LIMITED' | 'QUOTA_EXCEEDED' | 'INVALID_REQUEST' | 'USER_NOT_FOUND' | 'INTERNAL_ERROR';
78
+ type ErrorCode = 'INVALID_API_KEY' | 'ORIGIN_NOT_ALLOWED' | 'RATE_LIMITED' | 'QUOTA_EXCEEDED' | 'INVALID_REQUEST' | 'USER_NOT_FOUND' | 'INTERNAL_ERROR' | 'PARSE_ERROR';
79
+ interface ScoreData {
80
+ elementId: string;
81
+ averageRating: number | null;
82
+ totalResponses: number;
83
+ ratingCount: number;
84
+ voteCount: {
85
+ up: number;
86
+ down: number;
87
+ };
88
+ positiveRate: number | null;
89
+ npsScore: number | null;
90
+ }
91
+
92
+ interface GotchaThemeColors {
93
+ primary: string;
94
+ primaryHover: string;
95
+ primaryText: string;
96
+ background: string;
97
+ backgroundGradient: string;
98
+ surface: string;
99
+ surfaceHover: string;
100
+ text: string;
101
+ textSecondary: string;
102
+ textDisabled: string;
103
+ border: string;
104
+ borderFocus: string;
105
+ success: string;
106
+ successSurface: string;
107
+ error: string;
108
+ errorSurface: string;
109
+ errorBorder: string;
110
+ warning: string;
111
+ warningActive: string;
112
+ warningSurface: string;
113
+ warningBorder: string;
114
+ starFilled: string;
115
+ starEmpty: string;
116
+ voteUp: string;
117
+ voteUpSurface: string;
118
+ voteUpBorder: string;
119
+ voteDown: string;
120
+ voteDownSurface: string;
121
+ voteDownBorder: string;
122
+ npsColors: string[];
123
+ buttonBackground: string;
124
+ buttonBackgroundHover: string;
125
+ buttonBackgroundDisabled: string;
126
+ buttonColor: string;
127
+ buttonColorDisabled: string;
128
+ buttonBorder: string;
129
+ buttonShadow: string;
130
+ backdropColor: string;
131
+ closeButton: string;
132
+ closeButtonHover: string;
133
+ closeButtonBg: string;
134
+ glassBackground: string;
135
+ glassBorder: string;
136
+ glassColor: string;
137
+ glassShadow: string;
138
+ glassHoverShadow: string;
139
+ inputBackground: string;
140
+ inputBackgroundFocus: string;
141
+ inputBorder: string;
142
+ inputBorderFocus: string;
143
+ inputFocusRing: string;
144
+ pollBorder: string;
145
+ pollSelectedBorder: string;
146
+ pollBackground: string;
147
+ pollSelectedBackground: string;
148
+ pollColor: string;
149
+ pollSelectedColor: string;
150
+ pollCheckBorder: string;
151
+ pollCheckSelectedBorder: string;
152
+ pollCheckSelectedBg: string;
153
+ }
154
+ interface GotchaThemeTypography {
155
+ fontFamily: string;
156
+ fontSize: {
157
+ xs: number;
158
+ sm: number;
159
+ md: number;
160
+ lg: number;
161
+ };
162
+ fontWeight: {
163
+ normal: number;
164
+ medium: number;
165
+ semibold: number;
166
+ bold: number;
167
+ };
168
+ }
169
+ interface GotchaThemeBorders {
170
+ radius: {
171
+ sm: number;
172
+ md: number;
173
+ lg: number;
174
+ full: string;
175
+ };
176
+ width: number;
177
+ }
178
+ interface GotchaThemeShadows {
179
+ sm: string;
180
+ md: string;
181
+ lg: string;
182
+ modal: string;
183
+ button: string;
184
+ }
185
+ interface GotchaThemeAnimation {
186
+ duration: {
187
+ fast: string;
188
+ normal: string;
189
+ slow: string;
190
+ };
191
+ easing: {
192
+ default: string;
193
+ spring: string;
194
+ };
195
+ }
196
+ interface GotchaThemeConfig {
197
+ colors?: Partial<GotchaThemeColors>;
198
+ typography?: Partial<GotchaThemeTypography>;
199
+ borders?: Partial<GotchaThemeBorders>;
200
+ shadows?: Partial<GotchaThemeShadows>;
201
+ animation?: Partial<GotchaThemeAnimation>;
202
+ }
203
+ /** Create a custom theme by merging partial overrides onto a preset */
204
+ declare function createTheme(base: 'light' | 'dark', overrides: GotchaThemeConfig): GotchaThemeConfig;
61
205
 
62
206
  interface GotchaProviderProps {
63
207
  /** Your Gotcha API key */
@@ -72,8 +216,10 @@ interface GotchaProviderProps {
72
216
  disabled?: boolean;
73
217
  /** Default user metadata applied to all submissions */
74
218
  defaultUser?: GotchaUser;
219
+ /** Theme configuration overrides applied to all instances */
220
+ themeConfig?: GotchaThemeConfig;
75
221
  }
76
- declare function GotchaProvider({ apiKey, children, baseUrl, debug, disabled, defaultUser, }: GotchaProviderProps): react_jsx_runtime.JSX.Element;
222
+ declare function GotchaProvider({ apiKey, children, baseUrl, debug, disabled, defaultUser, themeConfig, }: GotchaProviderProps): react_jsx_runtime.JSX.Element;
77
223
 
78
224
  interface GotchaProps {
79
225
  /** Unique identifier for this element */
@@ -95,8 +241,16 @@ interface GotchaProps {
95
241
  options?: string[];
96
242
  /** Allow selecting multiple options */
97
243
  allowMultiple?: boolean;
98
- /** Show results after voting */
99
- showResults?: boolean;
244
+ /** Custom NPS question (default: "How likely are you to recommend us?") */
245
+ npsQuestion?: string;
246
+ /** Show follow-up textarea after score selection (default: true) */
247
+ npsFollowUp?: boolean;
248
+ /** Placeholder for NPS follow-up textarea */
249
+ npsFollowUpPlaceholder?: string;
250
+ /** Label for low end of NPS scale (default: "Not likely") */
251
+ npsLowLabel?: string;
252
+ /** Label for high end of NPS scale (default: "Very likely") */
253
+ npsHighLabel?: string;
100
254
  /** Button position relative to parent */
101
255
  position?: Position;
102
256
  /** Button size */
@@ -119,6 +273,14 @@ interface GotchaProps {
119
273
  submitText?: string;
120
274
  /** Post-submission message */
121
275
  thankYouMessage?: string;
276
+ /** Show "Report an issue" toggle in feedback form (default: false) */
277
+ enableBugFlag?: boolean;
278
+ /** Custom label for the bug flag toggle (default: "Report an issue") */
279
+ bugFlagLabel?: string;
280
+ /** When true and user has already responded, show submitted state and allow review/edit instead of new submission */
281
+ onePerUser?: boolean;
282
+ /** Enable entrance animations on the button and modal (default: true) */
283
+ animated?: boolean;
122
284
  /** Called after successful submission */
123
285
  onSubmit?: (response: GotchaResponse) => void;
124
286
  /** Called when modal opens */
@@ -128,7 +290,19 @@ interface GotchaProps {
128
290
  /** Called on error */
129
291
  onError?: (error: GotchaError) => void;
130
292
  }
131
- declare function Gotcha({ elementId, user, mode, showText, showRating, voteLabels, options, allowMultiple, showResults, position, size, theme, customStyles, visible, showOnHover, touchBehavior, promptText, placeholder, submitText, thankYouMessage, onSubmit, onOpen, onClose, onError, }: GotchaProps): react_jsx_runtime.JSX.Element | null;
293
+ declare function Gotcha({ elementId, user, mode, showText, showRating, voteLabels, options, allowMultiple, npsQuestion, npsFollowUp, npsFollowUpPlaceholder, npsLowLabel, npsHighLabel, enableBugFlag, bugFlagLabel, onePerUser, animated, position, size, theme, customStyles, visible, showOnHover, touchBehavior, promptText, placeholder, submitText, thankYouMessage, onSubmit, onOpen, onClose, onError, }: GotchaProps): react_jsx_runtime.JSX.Element | null;
294
+
295
+ type ScoreVariant = 'stars' | 'number' | 'compact' | 'votes';
296
+ interface GotchaScoreProps {
297
+ elementId: string;
298
+ variant?: ScoreVariant;
299
+ showCount?: boolean;
300
+ size?: Size;
301
+ theme?: Theme;
302
+ refreshInterval?: number;
303
+ style?: React$1.CSSProperties;
304
+ }
305
+ declare function GotchaScore({ elementId, variant, showCount, size, theme, refreshInterval, style, }: GotchaScoreProps): react_jsx_runtime.JSX.Element | null;
132
306
 
133
307
  /**
134
308
  * Hook to access Gotcha context
@@ -146,6 +320,11 @@ declare function useGotcha(): {
146
320
  vote?: VoteType;
147
321
  pollSelected?: string[];
148
322
  }, userId?: string): Promise<GotchaResponse>;
323
+ getScore(elementId: string): Promise<ScoreData>;
324
+ flagAsBug(responseId: string): Promise<{
325
+ ticketId: string;
326
+ status: string;
327
+ }>;
149
328
  getBaseUrl(): string;
150
329
  };
151
330
  /** Whether Gotcha is globally disabled */
@@ -158,4 +337,4 @@ declare function useGotcha(): {
158
337
  submitFeedback: (payload: Omit<SubmitResponsePayload, "context">) => Promise<GotchaResponse>;
159
338
  };
160
339
 
161
- export { Gotcha, type GotchaError, type GotchaProps, GotchaProvider, type GotchaProviderProps, type GotchaResponse, type GotchaStyles, type GotchaUser, type Position, type ResponseMode, type Size, type Theme, type TouchBehavior, type VoteType, useGotcha };
340
+ export { Gotcha, type GotchaError, type GotchaProps, GotchaProvider, type GotchaProviderProps, type GotchaResponse, GotchaScore, type GotchaScoreProps, type GotchaStyles, type GotchaThemeConfig, type GotchaUser, type Position, type ResponseMode, type ScoreData, type Size, type Theme, type TouchBehavior, type VoteType, createTheme, useGotcha };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React$1 from 'react';
3
3
 
4
- type ResponseMode = 'feedback' | 'vote' | 'poll';
4
+ type ResponseMode = 'feedback' | 'vote' | 'poll' | 'nps';
5
5
  type VoteType = 'up' | 'down';
6
6
  interface GotchaUser {
7
7
  id?: string;
@@ -16,6 +16,23 @@ interface GotchaStyles {
16
16
  modal?: React.CSSProperties;
17
17
  input?: React.CSSProperties;
18
18
  submitButton?: React.CSSProperties;
19
+ title?: React.CSSProperties;
20
+ closeButton?: React.CSSProperties;
21
+ starRating?: React.CSSProperties;
22
+ star?: React.CSSProperties;
23
+ voteButton?: React.CSSProperties;
24
+ voteButtonSelected?: React.CSSProperties;
25
+ pollOption?: React.CSSProperties;
26
+ pollOptionSelected?: React.CSSProperties;
27
+ npsButton?: React.CSSProperties;
28
+ npsButtonSelected?: React.CSSProperties;
29
+ npsLabels?: React.CSSProperties;
30
+ successMessage?: React.CSSProperties;
31
+ successIcon?: React.CSSProperties;
32
+ errorMessage?: React.CSSProperties;
33
+ bugFlag?: React.CSSProperties;
34
+ backdrop?: React.CSSProperties;
35
+ spinner?: React.CSSProperties;
19
36
  }
20
37
  interface SubmitResponsePayload {
21
38
  elementId: string;
@@ -26,6 +43,7 @@ interface SubmitResponsePayload {
26
43
  vote?: VoteType;
27
44
  pollOptions?: string[];
28
45
  pollSelected?: string[];
46
+ isBug?: boolean;
29
47
  user?: GotchaUser;
30
48
  context?: {
31
49
  url?: string;
@@ -57,7 +75,133 @@ interface GotchaError {
57
75
  message: string;
58
76
  status: number;
59
77
  }
60
- type ErrorCode = 'INVALID_API_KEY' | 'ORIGIN_NOT_ALLOWED' | 'RATE_LIMITED' | 'QUOTA_EXCEEDED' | 'INVALID_REQUEST' | 'USER_NOT_FOUND' | 'INTERNAL_ERROR';
78
+ type ErrorCode = 'INVALID_API_KEY' | 'ORIGIN_NOT_ALLOWED' | 'RATE_LIMITED' | 'QUOTA_EXCEEDED' | 'INVALID_REQUEST' | 'USER_NOT_FOUND' | 'INTERNAL_ERROR' | 'PARSE_ERROR';
79
+ interface ScoreData {
80
+ elementId: string;
81
+ averageRating: number | null;
82
+ totalResponses: number;
83
+ ratingCount: number;
84
+ voteCount: {
85
+ up: number;
86
+ down: number;
87
+ };
88
+ positiveRate: number | null;
89
+ npsScore: number | null;
90
+ }
91
+
92
+ interface GotchaThemeColors {
93
+ primary: string;
94
+ primaryHover: string;
95
+ primaryText: string;
96
+ background: string;
97
+ backgroundGradient: string;
98
+ surface: string;
99
+ surfaceHover: string;
100
+ text: string;
101
+ textSecondary: string;
102
+ textDisabled: string;
103
+ border: string;
104
+ borderFocus: string;
105
+ success: string;
106
+ successSurface: string;
107
+ error: string;
108
+ errorSurface: string;
109
+ errorBorder: string;
110
+ warning: string;
111
+ warningActive: string;
112
+ warningSurface: string;
113
+ warningBorder: string;
114
+ starFilled: string;
115
+ starEmpty: string;
116
+ voteUp: string;
117
+ voteUpSurface: string;
118
+ voteUpBorder: string;
119
+ voteDown: string;
120
+ voteDownSurface: string;
121
+ voteDownBorder: string;
122
+ npsColors: string[];
123
+ buttonBackground: string;
124
+ buttonBackgroundHover: string;
125
+ buttonBackgroundDisabled: string;
126
+ buttonColor: string;
127
+ buttonColorDisabled: string;
128
+ buttonBorder: string;
129
+ buttonShadow: string;
130
+ backdropColor: string;
131
+ closeButton: string;
132
+ closeButtonHover: string;
133
+ closeButtonBg: string;
134
+ glassBackground: string;
135
+ glassBorder: string;
136
+ glassColor: string;
137
+ glassShadow: string;
138
+ glassHoverShadow: string;
139
+ inputBackground: string;
140
+ inputBackgroundFocus: string;
141
+ inputBorder: string;
142
+ inputBorderFocus: string;
143
+ inputFocusRing: string;
144
+ pollBorder: string;
145
+ pollSelectedBorder: string;
146
+ pollBackground: string;
147
+ pollSelectedBackground: string;
148
+ pollColor: string;
149
+ pollSelectedColor: string;
150
+ pollCheckBorder: string;
151
+ pollCheckSelectedBorder: string;
152
+ pollCheckSelectedBg: string;
153
+ }
154
+ interface GotchaThemeTypography {
155
+ fontFamily: string;
156
+ fontSize: {
157
+ xs: number;
158
+ sm: number;
159
+ md: number;
160
+ lg: number;
161
+ };
162
+ fontWeight: {
163
+ normal: number;
164
+ medium: number;
165
+ semibold: number;
166
+ bold: number;
167
+ };
168
+ }
169
+ interface GotchaThemeBorders {
170
+ radius: {
171
+ sm: number;
172
+ md: number;
173
+ lg: number;
174
+ full: string;
175
+ };
176
+ width: number;
177
+ }
178
+ interface GotchaThemeShadows {
179
+ sm: string;
180
+ md: string;
181
+ lg: string;
182
+ modal: string;
183
+ button: string;
184
+ }
185
+ interface GotchaThemeAnimation {
186
+ duration: {
187
+ fast: string;
188
+ normal: string;
189
+ slow: string;
190
+ };
191
+ easing: {
192
+ default: string;
193
+ spring: string;
194
+ };
195
+ }
196
+ interface GotchaThemeConfig {
197
+ colors?: Partial<GotchaThemeColors>;
198
+ typography?: Partial<GotchaThemeTypography>;
199
+ borders?: Partial<GotchaThemeBorders>;
200
+ shadows?: Partial<GotchaThemeShadows>;
201
+ animation?: Partial<GotchaThemeAnimation>;
202
+ }
203
+ /** Create a custom theme by merging partial overrides onto a preset */
204
+ declare function createTheme(base: 'light' | 'dark', overrides: GotchaThemeConfig): GotchaThemeConfig;
61
205
 
62
206
  interface GotchaProviderProps {
63
207
  /** Your Gotcha API key */
@@ -72,8 +216,10 @@ interface GotchaProviderProps {
72
216
  disabled?: boolean;
73
217
  /** Default user metadata applied to all submissions */
74
218
  defaultUser?: GotchaUser;
219
+ /** Theme configuration overrides applied to all instances */
220
+ themeConfig?: GotchaThemeConfig;
75
221
  }
76
- declare function GotchaProvider({ apiKey, children, baseUrl, debug, disabled, defaultUser, }: GotchaProviderProps): react_jsx_runtime.JSX.Element;
222
+ declare function GotchaProvider({ apiKey, children, baseUrl, debug, disabled, defaultUser, themeConfig, }: GotchaProviderProps): react_jsx_runtime.JSX.Element;
77
223
 
78
224
  interface GotchaProps {
79
225
  /** Unique identifier for this element */
@@ -95,8 +241,16 @@ interface GotchaProps {
95
241
  options?: string[];
96
242
  /** Allow selecting multiple options */
97
243
  allowMultiple?: boolean;
98
- /** Show results after voting */
99
- showResults?: boolean;
244
+ /** Custom NPS question (default: "How likely are you to recommend us?") */
245
+ npsQuestion?: string;
246
+ /** Show follow-up textarea after score selection (default: true) */
247
+ npsFollowUp?: boolean;
248
+ /** Placeholder for NPS follow-up textarea */
249
+ npsFollowUpPlaceholder?: string;
250
+ /** Label for low end of NPS scale (default: "Not likely") */
251
+ npsLowLabel?: string;
252
+ /** Label for high end of NPS scale (default: "Very likely") */
253
+ npsHighLabel?: string;
100
254
  /** Button position relative to parent */
101
255
  position?: Position;
102
256
  /** Button size */
@@ -119,6 +273,14 @@ interface GotchaProps {
119
273
  submitText?: string;
120
274
  /** Post-submission message */
121
275
  thankYouMessage?: string;
276
+ /** Show "Report an issue" toggle in feedback form (default: false) */
277
+ enableBugFlag?: boolean;
278
+ /** Custom label for the bug flag toggle (default: "Report an issue") */
279
+ bugFlagLabel?: string;
280
+ /** When true and user has already responded, show submitted state and allow review/edit instead of new submission */
281
+ onePerUser?: boolean;
282
+ /** Enable entrance animations on the button and modal (default: true) */
283
+ animated?: boolean;
122
284
  /** Called after successful submission */
123
285
  onSubmit?: (response: GotchaResponse) => void;
124
286
  /** Called when modal opens */
@@ -128,7 +290,19 @@ interface GotchaProps {
128
290
  /** Called on error */
129
291
  onError?: (error: GotchaError) => void;
130
292
  }
131
- declare function Gotcha({ elementId, user, mode, showText, showRating, voteLabels, options, allowMultiple, showResults, position, size, theme, customStyles, visible, showOnHover, touchBehavior, promptText, placeholder, submitText, thankYouMessage, onSubmit, onOpen, onClose, onError, }: GotchaProps): react_jsx_runtime.JSX.Element | null;
293
+ declare function Gotcha({ elementId, user, mode, showText, showRating, voteLabels, options, allowMultiple, npsQuestion, npsFollowUp, npsFollowUpPlaceholder, npsLowLabel, npsHighLabel, enableBugFlag, bugFlagLabel, onePerUser, animated, position, size, theme, customStyles, visible, showOnHover, touchBehavior, promptText, placeholder, submitText, thankYouMessage, onSubmit, onOpen, onClose, onError, }: GotchaProps): react_jsx_runtime.JSX.Element | null;
294
+
295
+ type ScoreVariant = 'stars' | 'number' | 'compact' | 'votes';
296
+ interface GotchaScoreProps {
297
+ elementId: string;
298
+ variant?: ScoreVariant;
299
+ showCount?: boolean;
300
+ size?: Size;
301
+ theme?: Theme;
302
+ refreshInterval?: number;
303
+ style?: React$1.CSSProperties;
304
+ }
305
+ declare function GotchaScore({ elementId, variant, showCount, size, theme, refreshInterval, style, }: GotchaScoreProps): react_jsx_runtime.JSX.Element | null;
132
306
 
133
307
  /**
134
308
  * Hook to access Gotcha context
@@ -146,6 +320,11 @@ declare function useGotcha(): {
146
320
  vote?: VoteType;
147
321
  pollSelected?: string[];
148
322
  }, userId?: string): Promise<GotchaResponse>;
323
+ getScore(elementId: string): Promise<ScoreData>;
324
+ flagAsBug(responseId: string): Promise<{
325
+ ticketId: string;
326
+ status: string;
327
+ }>;
149
328
  getBaseUrl(): string;
150
329
  };
151
330
  /** Whether Gotcha is globally disabled */
@@ -158,4 +337,4 @@ declare function useGotcha(): {
158
337
  submitFeedback: (payload: Omit<SubmitResponsePayload, "context">) => Promise<GotchaResponse>;
159
338
  };
160
339
 
161
- export { Gotcha, type GotchaError, type GotchaProps, GotchaProvider, type GotchaProviderProps, type GotchaResponse, type GotchaStyles, type GotchaUser, type Position, type ResponseMode, type Size, type Theme, type TouchBehavior, type VoteType, useGotcha };
340
+ export { Gotcha, type GotchaError, type GotchaProps, GotchaProvider, type GotchaProviderProps, type GotchaResponse, GotchaScore, type GotchaScoreProps, type GotchaStyles, type GotchaThemeConfig, type GotchaUser, type Position, type ResponseMode, type ScoreData, type Size, type Theme, type TouchBehavior, type VoteType, createTheme, useGotcha };