fix: bloated lib/**/*.d.ts files

Author: DimitarNestorov

src/components/Appbar/AppbarAction.tsx

@@ -5,6 +5,7 @@ import color from 'color';
 
 import { useInternalTheme } from '../../core/theming';
 import { black } from '../../styles/themes/v2/colors';
+import { forwardRef } from '../../utils/forwardRef';
 import type { IconSource } from '../Icon';
 import IconButton from '../IconButton/IconButton';
 
@@ -68,7 +69,7 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
  * export default MyComponent;
  * ```
  */
-const AppbarAction = React.forwardRef<View, Props>(
+const AppbarAction = forwardRef<View, Props>(
   (
     {
       size = 24,

src/components/Appbar/AppbarBackAction.tsx

@@ -6,6 +6,7 @@ import type {
   View,
 } from 'react-native';
 
+import { forwardRef } from '../../utils/forwardRef';
 import type { $Omit } from './../../types';
 import AppbarAction from './AppbarAction';
 import AppbarBackIcon from './AppbarBackIcon';
@@ -60,7 +61,7 @@ export type Props = $Omit<
  * export default MyComponent;
  * ```
  */
-const AppbarBackAction = React.forwardRef<View, Props>(
+const AppbarBackAction = forwardRef<View, Props>(
   ({ accessibilityLabel = 'Back', ...rest }: Props, ref) => (
     <AppbarAction
       accessibilityLabel={accessibilityLabel}

src/components/Card/Card.tsx

@@ -9,6 +9,8 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import type { ThemedComponent } from '@callstack/react-theme-provider';
+
 import { withInternalTheme } from '../../core/theming';
 import type { InternalTheme } from '../../types';
 import Surface from '../Surface';
@@ -39,7 +41,7 @@ type HandlePressType = 'in' | 'out';
 
 type Mode = 'elevated' | 'outlined' | 'contained';
 
-export type Props = React.ComponentProps<typeof Surface> & {
+export type CardProps = React.ComponentProps<typeof Surface> & {
   /**
    * Mode of the Card.
    * - `elevated` - Card with elevation.
@@ -82,6 +84,13 @@ export type Props = React.ComponentProps<typeof Surface> & {
   accessible?: boolean;
 };
 
+export type Props = (
+  | OutlinedCardProps
+  | ElevatedCardProps
+  | ContainedCardProps
+) &
+  CardProps;
+
 /**
  * A card is a sheet of material that serves as an entry point to more detailed information.
  *
@@ -137,7 +146,7 @@ const Card = ({
   testID = 'card',
   accessible,
   ...rest
-}: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props) => {
+}: Props) => {
   const isMode = React.useCallback(
     (modeToCompare: Mode) => {
       return cardMode === modeToCompare;
@@ -314,4 +323,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withInternalTheme(Card);
+export default withInternalTheme(Card) as ThemedComponent<unknown, Props> & {
+  Content: typeof CardContent;
+  Actions: typeof CardActions;
+  Cover: typeof CardCover;
+  Title: typeof CardTitle;
+};

src/components/FAB/FAB.tsx

@@ -9,8 +9,11 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import type { ThemedComponent } from '@callstack/react-theme-provider';
+
 import { withInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, InternalTheme } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import ActivityIndicator from '../ActivityIndicator';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon, { IconSource } from '../Icon';
@@ -154,7 +157,7 @@ export type Props = $RemoveChildren<typeof Surface> & {
  * export default MyComponent;
  * ```
  */
-const FAB = React.forwardRef<View, Props>(
+const FAB = forwardRef<View, Props>(
   (
     {
       icon,
@@ -335,9 +338,14 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withInternalTheme(FAB);
+export type ThemedFAB = ThemedComponent<
+  unknown,
+  React.ComponentProps<typeof FAB>
+>;
+
+export default withInternalTheme(FAB) as ThemedFAB;
 
 // @component-docs ignore-next-line
-const FABWithTheme = withInternalTheme(FAB);
+const FABWithTheme: ThemedFAB = withInternalTheme(FAB);
 // @component-docs ignore-next-line
 export { FABWithTheme as FAB };

src/components/IconButton/IconButton.tsx

@@ -9,6 +9,7 @@ import {
 
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon, { IconSource } from '../Icon';
 import Surface from '../Surface';
@@ -112,7 +113,7 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  *
  * @extends TouchableRipple props https://callstack.github.io/react-native-paper/touchable-ripple.html
  */
-const IconButton = React.forwardRef<View, Props>(
+const IconButton = forwardRef<View, Props>(
   (
     {
       icon,

src/components/Searchbar.tsx

@@ -17,6 +17,7 @@ import color from 'color';
 
 import { withInternalTheme } from '../core/theming';
 import type { InternalTheme } from '../types';
+import { forwardRef } from '../utils/forwardRef';
 import ActivityIndicator from './ActivityIndicator';
 import type { IconSource } from './Icon';
 import IconButton from './IconButton/IconButton';
@@ -119,7 +120,7 @@ type TextInputHandles = Pick<
 
  * ```
  */
-const Searchbar = React.forwardRef<TextInputHandles, Props>(
+const Searchbar = forwardRef<TextInputHandles, Props>(
   (
     {
       clearAccessibilityLabel = 'clear',

src/components/TextInput/TextInput.tsx

@@ -8,8 +8,11 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import type { ThemedComponent } from '@callstack/react-theme-provider';
+
 import { withInternalTheme } from '../../core/theming';
 import type { InternalTheme } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import TextInputAffix, {
   Props as TextInputAffixProps,
 } from './Adornment/TextInputAffix';
@@ -220,7 +223,7 @@ type TextInputHandles = Pick<
  * @extends TextInput props https://reactnative.dev/docs/textinput#props
  */
 
-const TextInput = React.forwardRef<TextInputHandles, Props>(
+const TextInput = forwardRef<TextInputHandles, Props>(
   (
     {
       mode = 'flat',
@@ -513,4 +516,10 @@ TextInput.Icon = TextInputIcon;
 // @ts-ignore Types of property 'theme' are incompatible.
 TextInput.Affix = TextInputAffix;
 
-export default withInternalTheme(TextInput);
+export default withInternalTheme(TextInput) as ThemedComponent<
+  unknown,
+  Props
+> & {
+  Icon: typeof TextInputIcon;
+  Affix: typeof TextInputAffix;
+};

src/utils/forwardRef.tsx

@@ -0,0 +1,15 @@
+import {
+  forwardRef as reactForwardRef,
+  ForwardRefRenderFunction,
+  PropsWithoutRef,
+  RefAttributes,
+  ForwardRefExoticComponent,
+} from 'react';
+
+export type ForwarRefComponent<T, P = {}> = ForwardRefExoticComponent<
+  PropsWithoutRef<P> & RefAttributes<T>
+>;
+
+export const forwardRef: <T, P = {}>(
+  render: ForwardRefRenderFunction<T, P>
+) => ForwarRefComponent<T, P> = reactForwardRef;