gotcha-feedback 1.1.0 → 1.1.2

package/README.md

@@ -49,7 +49,7 @@ function FeatureCard() {
 - **Customizable** - Themes, sizes, positions
 - **Accessible** - Full keyboard navigation and screen reader support
 - **Animated** - Smooth enter/exit animations with CSS transitions
-- **Lightweight** - ~15KB minified
+- **Lightweight** - ~11KB gzipped
 
 ## Props
 

package/dist/index.d.mts

@@ -16,6 +16,23 @@ interface GotchaStyles {
     modal?: React.CSSProperties;
     input?: React.CSSProperties;
     submitButton?: React.CSSProperties;
+    title?: React.CSSProperties;
+    closeButton?: React.CSSProperties;
+    starRating?: React.CSSProperties;
+    star?: React.CSSProperties;
+    voteButton?: React.CSSProperties;
+    voteButtonSelected?: React.CSSProperties;
+    pollOption?: React.CSSProperties;
+    pollOptionSelected?: React.CSSProperties;
+    npsButton?: React.CSSProperties;
+    npsButtonSelected?: React.CSSProperties;
+    npsLabels?: React.CSSProperties;
+    successMessage?: React.CSSProperties;
+    successIcon?: React.CSSProperties;
+    errorMessage?: React.CSSProperties;
+    bugFlag?: React.CSSProperties;
+    backdrop?: React.CSSProperties;
+    spinner?: React.CSSProperties;
 }
 interface SubmitResponsePayload {
     elementId: string;
@@ -72,6 +89,120 @@ interface ScoreData {
     npsScore: number | null;
 }
 
+interface GotchaThemeColors {
+    primary: string;
+    primaryHover: string;
+    primaryText: string;
+    background: string;
+    backgroundGradient: string;
+    surface: string;
+    surfaceHover: string;
+    text: string;
+    textSecondary: string;
+    textDisabled: string;
+    border: string;
+    borderFocus: string;
+    success: string;
+    successSurface: string;
+    error: string;
+    errorSurface: string;
+    errorBorder: string;
+    warning: string;
+    warningActive: string;
+    warningSurface: string;
+    warningBorder: string;
+    starFilled: string;
+    starEmpty: string;
+    voteUp: string;
+    voteUpSurface: string;
+    voteUpBorder: string;
+    voteDown: string;
+    voteDownSurface: string;
+    voteDownBorder: string;
+    npsColors: string[];
+    buttonBackground: string;
+    buttonBackgroundHover: string;
+    buttonBackgroundDisabled: string;
+    buttonColor: string;
+    buttonColorDisabled: string;
+    buttonBorder: string;
+    buttonShadow: string;
+    backdropColor: string;
+    closeButton: string;
+    closeButtonHover: string;
+    closeButtonBg: string;
+    glassBackground: string;
+    glassBorder: string;
+    glassColor: string;
+    glassShadow: string;
+    glassHoverShadow: string;
+    inputBackground: string;
+    inputBackgroundFocus: string;
+    inputBorder: string;
+    inputBorderFocus: string;
+    inputFocusRing: string;
+    pollBorder: string;
+    pollSelectedBorder: string;
+    pollBackground: string;
+    pollSelectedBackground: string;
+    pollColor: string;
+    pollSelectedColor: string;
+    pollCheckBorder: string;
+    pollCheckSelectedBorder: string;
+    pollCheckSelectedBg: string;
+}
+interface GotchaThemeTypography {
+    fontFamily: string;
+    fontSize: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    fontWeight: {
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+}
+interface GotchaThemeBorders {
+    radius: {
+        sm: number;
+        md: number;
+        lg: number;
+        full: string;
+    };
+    width: number;
+}
+interface GotchaThemeShadows {
+    sm: string;
+    md: string;
+    lg: string;
+    modal: string;
+    button: string;
+}
+interface GotchaThemeAnimation {
+    duration: {
+        fast: string;
+        normal: string;
+        slow: string;
+    };
+    easing: {
+        default: string;
+        spring: string;
+    };
+}
+interface GotchaThemeConfig {
+    colors?: Partial<GotchaThemeColors>;
+    typography?: Partial<GotchaThemeTypography>;
+    borders?: Partial<GotchaThemeBorders>;
+    shadows?: Partial<GotchaThemeShadows>;
+    animation?: Partial<GotchaThemeAnimation>;
+}
+/** Create a custom theme by merging partial overrides onto a preset */
+declare function createTheme(base: 'light' | 'dark', overrides: GotchaThemeConfig): GotchaThemeConfig;
+
 interface GotchaProviderProps {
     /** Your Gotcha API key */
     apiKey: string;
@@ -85,8 +216,10 @@ interface GotchaProviderProps {
     disabled?: boolean;
     /** Default user metadata applied to all submissions */
     defaultUser?: GotchaUser;
+    /** Theme configuration overrides applied to all instances */
+    themeConfig?: GotchaThemeConfig;
 }
-declare function GotchaProvider({ apiKey, children, baseUrl, debug, disabled, defaultUser, }: GotchaProviderProps): react_jsx_runtime.JSX.Element;
+declare function GotchaProvider({ apiKey, children, baseUrl, debug, disabled, defaultUser, themeConfig, }: GotchaProviderProps): react_jsx_runtime.JSX.Element;
 
 interface GotchaProps {
     /** Unique identifier for this element */
@@ -146,6 +279,8 @@ interface GotchaProps {
     bugFlagLabel?: string;
     /** When true and user has already responded, show submitted state and allow review/edit instead of new submission */
     onePerUser?: boolean;
+    /** Enable entrance animations on the button and modal (default: true) */
+    animated?: boolean;
     /** Called after successful submission */
     onSubmit?: (response: GotchaResponse) => void;
     /** Called when modal opens */
@@ -155,7 +290,7 @@ interface GotchaProps {
     /** Called on error */
     onError?: (error: GotchaError) => void;
 }
-declare function Gotcha({ elementId, user, mode, showText, showRating, voteLabels, options, allowMultiple, npsQuestion, npsFollowUp, npsFollowUpPlaceholder, npsLowLabel, npsHighLabel, enableBugFlag, bugFlagLabel, onePerUser, position, size, theme, customStyles, visible, showOnHover, touchBehavior, promptText, placeholder, submitText, thankYouMessage, onSubmit, onOpen, onClose, onError, }: GotchaProps): react_jsx_runtime.JSX.Element | null;
+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;
 
 type ScoreVariant = 'stars' | 'number' | 'compact' | 'votes';
 interface GotchaScoreProps {
@@ -202,4 +337,4 @@ declare function useGotcha(): {
     submitFeedback: (payload: Omit<SubmitResponsePayload, "context">) => Promise<GotchaResponse>;
 };
 
-export { Gotcha, type GotchaError, type GotchaProps, GotchaProvider, type GotchaProviderProps, type GotchaResponse, GotchaScore, type GotchaScoreProps, type GotchaStyles, type GotchaUser, type Position, type ResponseMode, type ScoreData, type Size, type Theme, type TouchBehavior, type VoteType, useGotcha };
+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

@@ -16,6 +16,23 @@ interface GotchaStyles {
     modal?: React.CSSProperties;
     input?: React.CSSProperties;
     submitButton?: React.CSSProperties;
+    title?: React.CSSProperties;
+    closeButton?: React.CSSProperties;
+    starRating?: React.CSSProperties;
+    star?: React.CSSProperties;
+    voteButton?: React.CSSProperties;
+    voteButtonSelected?: React.CSSProperties;
+    pollOption?: React.CSSProperties;
+    pollOptionSelected?: React.CSSProperties;
+    npsButton?: React.CSSProperties;
+    npsButtonSelected?: React.CSSProperties;
+    npsLabels?: React.CSSProperties;
+    successMessage?: React.CSSProperties;
+    successIcon?: React.CSSProperties;
+    errorMessage?: React.CSSProperties;
+    bugFlag?: React.CSSProperties;
+    backdrop?: React.CSSProperties;
+    spinner?: React.CSSProperties;
 }
 interface SubmitResponsePayload {
     elementId: string;
@@ -72,6 +89,120 @@ interface ScoreData {
     npsScore: number | null;
 }
 
+interface GotchaThemeColors {
+    primary: string;
+    primaryHover: string;
+    primaryText: string;
+    background: string;
+    backgroundGradient: string;
+    surface: string;
+    surfaceHover: string;
+    text: string;
+    textSecondary: string;
+    textDisabled: string;
+    border: string;
+    borderFocus: string;
+    success: string;
+    successSurface: string;
+    error: string;
+    errorSurface: string;
+    errorBorder: string;
+    warning: string;
+    warningActive: string;
+    warningSurface: string;
+    warningBorder: string;
+    starFilled: string;
+    starEmpty: string;
+    voteUp: string;
+    voteUpSurface: string;
+    voteUpBorder: string;
+    voteDown: string;
+    voteDownSurface: string;
+    voteDownBorder: string;
+    npsColors: string[];
+    buttonBackground: string;
+    buttonBackgroundHover: string;
+    buttonBackgroundDisabled: string;
+    buttonColor: string;
+    buttonColorDisabled: string;
+    buttonBorder: string;
+    buttonShadow: string;
+    backdropColor: string;
+    closeButton: string;
+    closeButtonHover: string;
+    closeButtonBg: string;
+    glassBackground: string;
+    glassBorder: string;
+    glassColor: string;
+    glassShadow: string;
+    glassHoverShadow: string;
+    inputBackground: string;
+    inputBackgroundFocus: string;
+    inputBorder: string;
+    inputBorderFocus: string;
+    inputFocusRing: string;
+    pollBorder: string;
+    pollSelectedBorder: string;
+    pollBackground: string;
+    pollSelectedBackground: string;
+    pollColor: string;
+    pollSelectedColor: string;
+    pollCheckBorder: string;
+    pollCheckSelectedBorder: string;
+    pollCheckSelectedBg: string;
+}
+interface GotchaThemeTypography {
+    fontFamily: string;
+    fontSize: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    fontWeight: {
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+}
+interface GotchaThemeBorders {
+    radius: {
+        sm: number;
+        md: number;
+        lg: number;
+        full: string;
+    };
+    width: number;
+}
+interface GotchaThemeShadows {
+    sm: string;
+    md: string;
+    lg: string;
+    modal: string;
+    button: string;
+}
+interface GotchaThemeAnimation {
+    duration: {
+        fast: string;
+        normal: string;
+        slow: string;
+    };
+    easing: {
+        default: string;
+        spring: string;
+    };
+}
+interface GotchaThemeConfig {
+    colors?: Partial<GotchaThemeColors>;
+    typography?: Partial<GotchaThemeTypography>;
+    borders?: Partial<GotchaThemeBorders>;
+    shadows?: Partial<GotchaThemeShadows>;
+    animation?: Partial<GotchaThemeAnimation>;
+}
+/** Create a custom theme by merging partial overrides onto a preset */
+declare function createTheme(base: 'light' | 'dark', overrides: GotchaThemeConfig): GotchaThemeConfig;
+
 interface GotchaProviderProps {
     /** Your Gotcha API key */
     apiKey: string;
@@ -85,8 +216,10 @@ interface GotchaProviderProps {
     disabled?: boolean;
     /** Default user metadata applied to all submissions */
     defaultUser?: GotchaUser;
+    /** Theme configuration overrides applied to all instances */
+    themeConfig?: GotchaThemeConfig;
 }
-declare function GotchaProvider({ apiKey, children, baseUrl, debug, disabled, defaultUser, }: GotchaProviderProps): react_jsx_runtime.JSX.Element;
+declare function GotchaProvider({ apiKey, children, baseUrl, debug, disabled, defaultUser, themeConfig, }: GotchaProviderProps): react_jsx_runtime.JSX.Element;
 
 interface GotchaProps {
     /** Unique identifier for this element */
@@ -146,6 +279,8 @@ interface GotchaProps {
     bugFlagLabel?: string;
     /** When true and user has already responded, show submitted state and allow review/edit instead of new submission */
     onePerUser?: boolean;
+    /** Enable entrance animations on the button and modal (default: true) */
+    animated?: boolean;
     /** Called after successful submission */
     onSubmit?: (response: GotchaResponse) => void;
     /** Called when modal opens */
@@ -155,7 +290,7 @@ interface GotchaProps {
     /** Called on error */
     onError?: (error: GotchaError) => void;
 }
-declare function Gotcha({ elementId, user, mode, showText, showRating, voteLabels, options, allowMultiple, npsQuestion, npsFollowUp, npsFollowUpPlaceholder, npsLowLabel, npsHighLabel, enableBugFlag, bugFlagLabel, onePerUser, position, size, theme, customStyles, visible, showOnHover, touchBehavior, promptText, placeholder, submitText, thankYouMessage, onSubmit, onOpen, onClose, onError, }: GotchaProps): react_jsx_runtime.JSX.Element | null;
+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;
 
 type ScoreVariant = 'stars' | 'number' | 'compact' | 'votes';
 interface GotchaScoreProps {
@@ -202,4 +337,4 @@ declare function useGotcha(): {
     submitFeedback: (payload: Omit<SubmitResponsePayload, "context">) => Promise<GotchaResponse>;
 };
 
-export { Gotcha, type GotchaError, type GotchaProps, GotchaProvider, type GotchaProviderProps, type GotchaResponse, GotchaScore, type GotchaScoreProps, type GotchaStyles, type GotchaUser, type Position, type ResponseMode, type ScoreData, type Size, type Theme, type TouchBehavior, type VoteType, useGotcha };
+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 };