Extend size and variant prop types

src/elements/Button/Button.tsx

@@ -25,12 +25,12 @@ export interface ButtonProps
  /**
  * Style variant of the button.
  */
- variant?: 'filled' | 'outline' | 'text';
+ variant?: 'filled' | 'outline' | 'text' | string;
 
  /**
  * The size variation of the button.
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * If true, the button will take up the full width of its container.

src/elements/Button/ButtonTheme.ts

@@ -12,12 +12,14 @@ export interface ButtonTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  };
  variants: {
  filled: string;
  outline: string;
  text: string;
+ [key: string]: string;
  };
  colors: {
  default: {

src/elements/Chip/Chip.tsx

@@ -20,12 +20,12 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
  * Size variant for the chip.
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * Style variant for the chip.
  */
- variant?: 'filled' | 'outline';
+ variant?: 'filled' | 'outline' | string;
 
  /**
  * Whether the chip is selected.

src/elements/Chip/ChipTheme.ts

@@ -29,6 +29,7 @@ export interface ChipTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  };
  variants: {
@@ -49,6 +50,7 @@ export interface ChipTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  focus: string;
  deleteButton: {
@@ -57,6 +59,7 @@ export interface ChipTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  };
  disabled: string;

src/elements/Loader/DotsLoader.tsx

@@ -18,7 +18,7 @@ export interface DotsLoaderProps {
  /**
  * The size of the loader.
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * Theme for the DotsLoader.

src/elements/Loader/DotsLoaderTheme.ts

@@ -5,6 +5,7 @@ export interface DotsLoaderTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
 }
 

src/form/Checkbox/Checkbox.tsx

@@ -28,7 +28,7 @@ export interface CheckboxProps {
  /**
  * Size of the checkbox.
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * Additional class names to apply to the checkbox.

src/form/Checkbox/CheckboxTheme.ts

@@ -9,6 +9,7 @@ export interface CheckboxTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  };
  border: string;
@@ -19,6 +20,7 @@ export interface CheckboxTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  boxVariants: {
  hover: {

src/form/Input/Input.tsx

@@ -36,7 +36,7 @@ export interface InputProps
  /**
  * Size of the input.
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * Content to display before the input.

src/form/Input/InputTheme.ts

@@ -10,6 +10,7 @@ export interface InputTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  adornment: {
  base: string;

src/form/Radio/Radio.tsx

@@ -37,7 +37,7 @@ export interface RadioProps {
  /**
  * Size of the radio.
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * Event handler for when the radio is changed.

src/form/Radio/RadioTheme.ts

@@ -12,6 +12,7 @@ export interface RadioTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  };
  label: {
@@ -24,6 +25,7 @@ export interface RadioTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
 }
 

src/form/Textarea/Textarea.tsx

@@ -31,7 +31,7 @@ export interface TextareaProps extends TextareaAutosizeProps {
  /**
  * Size of the field.
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * Theme for the Textarea.

src/form/Textarea/TextareaTheme.ts

@@ -10,6 +10,7 @@ export interface TextareaTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
 }
 

src/form/Toggle/Toggle.tsx

@@ -22,7 +22,7 @@ export interface ToggleProps {
  /**
  * The size of the toggle.
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * When the toggle is changed.

src/form/Toggle/ToggleTheme.ts

@@ -9,6 +9,7 @@ export interface ToggleTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  disabled: string;
  disabledAndChecked: string;
@@ -17,6 +18,7 @@ export interface ToggleTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
 }
 

src/layout/Tabs/Tab.tsx

@@ -47,7 +47,7 @@ export interface TabProps extends PropsWithChildren {
  *
  * @private
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * Theme for the Tabs.

src/layout/Tabs/TabList.tsx

@@ -45,7 +45,7 @@ export interface TabListProps extends PropsWithChildren {
  * The size of the tabs.
  * @private
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * Theme for the Tabs.

src/layout/Tabs/Tabs.tsx

@@ -49,7 +49,7 @@ export interface TabsProps extends PropsWithChildren {
  /**
  * The size of the tabs.
  */
- size?: 'small' | 'medium' | 'large';
+ size?: 'small' | 'medium' | 'large' | string;
 
  /**
  * The callback to be called when a tab is selected.

src/layout/Tabs/TabsTheme.ts

@@ -8,6 +8,7 @@ export interface TabsTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  };
  divider: string;
@@ -28,6 +29,7 @@ export interface TabsTheme {
  small: string;
  medium: string;
  large: string;
+ [key: string]: string;
  };
  };
  };

src/layout/VerticalSpacer/VerticalSpacer.tsx

@@ -15,7 +15,14 @@ export interface VerticalSpacerProps extends HTMLAttributes<HTMLDivElement> {
  theme?: VerticalSpacerTheme;
 }
 
-export type VerticalSpaceType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type VerticalSpaceType =
+ | 'xs'
+ | 'sm'
+ | 'md'
+ | 'lg'
+ | 'xl'
+ | 'xxl'
+ | string;
 
 export interface VerticalSpacerRef {
  /**

src/layout/VerticalSpacer/VerticalSpacerTheme.ts

@@ -7,6 +7,7 @@ export interface VerticalSpacerTheme {
  lg: string;
  xl: string;
  xxl: string;
+ [key: string]: string;
  };
 }