@frigade/react 1.32.85 → 1.33.0

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import React__default, { CSSProperties, FC } from 'react';
+import React__default, { CSSProperties, FC, ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { BorderProps, ColorProps, LayoutProps, ShadowProps, SpaceProps, TypographyProps, FontProps } from 'styled-system';
 
 type StepActionType = 'STARTED_STEP' | 'COMPLETED_STEP' | 'NOT_STARTED_STEP';
 
@@ -295,6 +296,7 @@ interface FrigadeConfig {
      * Used mostly for demo purposes.
      */
     readonly?: boolean;
+    theme?: Record<string, any>;
 }
 declare const FrigadeProvider: FC<FrigadeProviderProps>;
 
@@ -604,6 +606,7 @@ declare const FrigadeBanner: React__default.FC<FrigadeBannerProps>;
 
 interface FrigadeNPSSurveyProps extends DefaultFrigadeFlowProps {
     dismissible?: boolean;
+    type?: 'inline' | 'modal';
 }
 declare const FrigadeNPSSurvey: React__default.FC<FrigadeNPSSurveyProps>;
 
@@ -638,16 +641,24 @@ declare function Label({ title, required, appearance, }: {
 
 declare function TextField({ formInput, customFormTypeProps, onSaveInputData, setFormValidationErrors, inputData, }: FormInputProps): JSX.Element;
 
-interface ProgressRingProps {
-    fillColor: string;
-    size: number;
-    bgColor?: string;
-    percentage: number;
-    className?: string;
-    style?: React__default.CSSProperties;
-    children?: React__default.ReactNode;
+interface Overrides extends Record<string, Overrides | CSSProperties> {
 }
-declare const ProgressRing: FC<ProgressRingProps>;
+type BoxProps<T extends ElementType = 'div'> = {
+    as?: T;
+    css?: Record<string, any>;
+    children?: ReactNode;
+    overrides?: Overrides;
+} & BorderProps & ColorProps & Exclude<LayoutProps, 'size'> & ShadowProps & SpaceProps & TypographyProps & ComponentPropsWithoutRef<T>;
+
+interface ButtonProps extends BoxProps {
+    title: string;
+}
+declare const Button: React.FC<ButtonProps> & {
+    [k: string]: {
+        (props: ButtonProps): JSX.Element;
+        displayName: string;
+    };
+};
 
 type CheckBoxType = 'square' | 'round';
 interface CheckBoxProps {
@@ -661,4 +672,246 @@ interface CheckBoxProps {
 }
 declare const CheckBox: FC<CheckBoxProps>;
 
-export { Appearance, CheckBox, CustomFormTypeProps, EntityProperties, FormInputProps, FormInputType, Label as FormLabel, TextField as FormTextField, FormValidationError, FrigadeBanner, FrigadeChecklist, DefaultAppearance as FrigadeDefaultAppearance, FrigadeEmbeddedTip, FrigadeForm, FrigadeGuide, FrigadeHeroChecklist, FrigadeNPSSurvey, FrigadeProgressBadge, FrigadeProvider, FrigadeSupportWidget, BaseTheme as FrigadeTheme, FrigadeTour, ProgressRing, StepContentProps, StepData, useFlowOpens, useFlowResponses, useFlows, useOrganization, useUser };
+interface ProgressRingProps {
+    fillColor: string;
+    size: number;
+    bgColor?: string;
+    percentage: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    children?: React__default.ReactNode;
+}
+declare const ProgressRing: FC<ProgressRingProps>;
+
+declare const textVariants: {
+    readonly Display1: {
+        readonly fontSize: "5xl";
+        readonly fontWeight: "bold";
+        readonly letterSpacing: "md";
+        readonly lineHeight: "4xl";
+    };
+    readonly Display2: {
+        readonly fontSize: "4xl";
+        readonly fontWeight: "bold";
+        readonly letterSpacing: "md";
+        readonly lineHeight: "3xl";
+    };
+    readonly H1: {
+        readonly fontSize: "3xl";
+        readonly fontWeight: "bold";
+        readonly letterSpacing: "md";
+        readonly lineHeight: "2xl";
+    };
+    readonly H2: {
+        readonly fontSize: "2xl";
+        readonly fontWeight: "bold";
+        readonly letterSpacing: "md";
+        readonly lineHeight: "xl";
+    };
+    readonly H3: {
+        readonly fontSize: "xl";
+        readonly fontWeight: "bold";
+        readonly letterSpacing: "md";
+        readonly lineHeight: "lg";
+    };
+    readonly H4: {
+        readonly fontSize: "lg";
+        readonly fontWeight: "bold";
+        readonly letterSpacing: "md";
+        readonly lineHeight: "md";
+    };
+    readonly Body1: {
+        readonly fontSize: "md";
+        readonly fontWeight: "regular";
+        readonly letterSpacing: "md";
+        readonly lineHeight: "md";
+    };
+    readonly Body2: {
+        readonly fontSize: "sm";
+        readonly fontWeight: "regular";
+        readonly letterSpacing: "md";
+        readonly lineHeight: "md";
+    };
+    readonly Caption: {
+        readonly fontSize: "xs";
+        readonly fontWeight: "regular";
+        readonly letterSpacing: "md";
+        readonly lineHeight: "sm";
+    };
+};
+
+type TextVariant = keyof typeof textVariants;
+interface BaseTextProps extends BoxProps, Partial<Pick<FontProps, 'fontWeight'>> {
+    variant?: TextVariant;
+}
+declare const Text: React__default.FC<BaseTextProps> & {
+    [k: string]: {
+        (props: BaseTextProps): JSX.Element;
+        displayName: string;
+    };
+};
+
+declare const tokens: {
+    colors: {
+        neutral: {
+            foreground: string;
+        };
+        primary: {
+            background: string;
+            foreground: string;
+            inverted: string;
+        };
+        negative: {
+            foreground: string;
+        };
+        black: string;
+        gray100: string;
+        gray200: string;
+        gray300: string;
+        gray400: string;
+        gray500: string;
+        gray600: string;
+        gray700: string;
+        gray800: string;
+        gray900: string;
+        white: string;
+        blue400: string;
+        blue500: string;
+        blue800: string;
+        blue900: string;
+        green400: string;
+        green500: string;
+        green800: string;
+        transparent: string;
+        red500: string;
+    };
+    fonts: {
+        default: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+    };
+    fontWeights: {
+        regular: number;
+        semibold: number;
+        bold: number;
+    };
+    letterSpacings: {
+        md: string;
+    };
+    lineHeights: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    radii: {
+        md: string;
+        lg: string;
+        round: string;
+    };
+    shadows: {
+        md: string;
+    };
+    space: {
+        [k: string]: string;
+    };
+    components: {
+        Button: {
+            readonly Primary: {
+                readonly backgroundColor: "primary.background";
+                readonly color: "primary.foreground";
+                readonly '&:hover': {
+                    readonly backgroundColor: "blue400";
+                };
+            };
+            readonly Secondary: {
+                readonly backgroundColor: "white";
+                readonly border: "1px solid";
+                readonly borderColor: "gray800";
+                readonly color: "neutral.foreground";
+                readonly '&:hover': {
+                    readonly backgroundColor: "blue900";
+                };
+            };
+            readonly Link: {
+                readonly backgroundColor: "transparent";
+                readonly color: "primary.inverted";
+            };
+            readonly Plain: {
+                readonly backgroundColor: "transparent";
+                readonly color: "neutral.foreground";
+            };
+        };
+        Text: {
+            readonly Display1: {
+                readonly fontSize: "5xl";
+                readonly fontWeight: "bold";
+                readonly letterSpacing: "md";
+                readonly lineHeight: "4xl";
+            };
+            readonly Display2: {
+                readonly fontSize: "4xl";
+                readonly fontWeight: "bold";
+                readonly letterSpacing: "md";
+                readonly lineHeight: "3xl";
+            };
+            readonly H1: {
+                readonly fontSize: "3xl";
+                readonly fontWeight: "bold";
+                readonly letterSpacing: "md";
+                readonly lineHeight: "2xl";
+            };
+            readonly H2: {
+                readonly fontSize: "2xl";
+                readonly fontWeight: "bold";
+                readonly letterSpacing: "md";
+                readonly lineHeight: "xl";
+            };
+            readonly H3: {
+                readonly fontSize: "xl";
+                readonly fontWeight: "bold";
+                readonly letterSpacing: "md";
+                readonly lineHeight: "lg";
+            };
+            readonly H4: {
+                readonly fontSize: "lg";
+                readonly fontWeight: "bold";
+                readonly letterSpacing: "md";
+                readonly lineHeight: "md";
+            };
+            readonly Body1: {
+                readonly fontSize: "md";
+                readonly fontWeight: "regular";
+                readonly letterSpacing: "md";
+                readonly lineHeight: "md";
+            };
+            readonly Body2: {
+                readonly fontSize: "sm";
+                readonly fontWeight: "regular";
+                readonly letterSpacing: "md";
+                readonly lineHeight: "md";
+            };
+            readonly Caption: {
+                readonly fontSize: "xs";
+                readonly fontWeight: "regular";
+                readonly letterSpacing: "md";
+                readonly lineHeight: "sm";
+            };
+        };
+    };
+};
+
+export { Appearance, Button, CheckBox, CustomFormTypeProps, EntityProperties, FormInputProps, FormInputType, Label as FormLabel, TextField as FormTextField, FormValidationError, FrigadeBanner, FrigadeChecklist, DefaultAppearance as FrigadeDefaultAppearance, FrigadeEmbeddedTip, FrigadeForm, FrigadeGuide, FrigadeHeroChecklist, FrigadeNPSSurvey, FrigadeProgressBadge, FrigadeProvider, FrigadeSupportWidget, BaseTheme as FrigadeTheme, FrigadeTour, ProgressRing, StepContentProps, StepData, Text, tokens, useFlowOpens, useFlowResponses, useFlows, useOrganization, useUser };