refactor: utility types cleanup

src/components/Appbar/AppbarAction.tsx

@@ -4,11 +4,12 @@
 import type { AnimatedStyle } from 'react-native-reanimated';
 
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
 import type { IconSource } from '../Icon';
 import IconButton from '../IconButton/IconButton';
+import type { Props as IconButtonProps } from '../IconButton/IconButton';
 
-export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
+export type Props = React.PropsWithoutRef<IconButtonProps> & {
   /**
    *  Custom color for action icon.
    */

src/components/Appbar/AppbarBackAction.tsx

@@ -9,14 +9,11 @@ import type {
 
 import type { AnimatedStyle } from 'react-native-reanimated';
 
-import type { $Omit } from './../../types';
 import AppbarAction from './AppbarAction';
+import type { Props as AppbarActionProps } from './AppbarAction';
 import AppbarBackIcon from './AppbarBackIcon';
 
-export type Props = $Omit<
-  React.ComponentPropsWithoutRef<typeof AppbarAction>,
-  'icon'
-> & {
+export type Props = Omit<React.PropsWithoutRef<AppbarActionProps>, 'icon'> & {
   /**
    *  Custom color for back icon.
    */

src/components/Appbar/AppbarContent.tsx

@@ -10,7 +10,7 @@
 
 import { modeTextVariant } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../types';
 import Text from '../Typography/Text';
 import type { TextRef } from '../Typography/Text';
 
@@ -21,7 +21,7 @@
 
 type TitleElement = { title: React.ReactNode; titleStyle?: never };
 
-export type Props = $RemoveChildren<typeof View> & {
+export type Props = Omit<React.PropsWithoutRef<ViewProps>, 'children'> & {
   // For `title` and `titleStyle` props their types are duplicated due to the generation of documentation.
   // Appropriate type for them are either `TitleString` or `TitleElement`, depends on `title` type.
   /**

src/components/Appbar/AppbarHeader.tsx

@@ -5,15 +5,12 @@
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Appbar } from './Appbar';
-import type { AppbarStyle } from './Appbar';
+import type { AppbarStyle, Props as AppbarProps } from './Appbar';
 import { getAppbarBackgroundColor, modeAppbarHeight } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
 
-export type Props = Omit<
-  React.ComponentProps<typeof Appbar>,
-  'safeAreaInsets' | 'style'
-> & {
+export type Props = Omit<AppbarProps, 'safeAreaInsets' | 'style'> & {
   /**
    * Whether the background color is a dark color. A dark header will render light text and vice-versa.
    */

src/components/Banner.tsx

@@ -19,13 +19,14 @@ import { scheduleOnRN } from 'react-native-worklets';
 import useLatestCallback from 'use-latest-callback';
 
 import Button from './Button/Button';
+import type { Props as ButtonProps } from './Button/Button';
 import Icon from './Icon';
 import type { IconSource } from './Icon';
 import Surface from './Surface';
 import type { SurfaceStyle } from './Surface';
 import Text from './Typography/Text';
 import { useInternalTheme } from '../core/theming';
-import type { $RemoveChildren, Elevation, ThemeProp } from '../types';
+import type { Elevation, ThemeProp } from '../types';
 
 const DEFAULT_MAX_WIDTH = 960;
 
@@ -56,7 +57,7 @@ export type Props = Omit<ViewProps, 'style'> & {
   actions?: Array<
     {
       label: string;
-    } & $RemoveChildren<typeof Button>
+    } & Omit<React.PropsWithoutRef<ButtonProps>, 'children'>
   >;
   /**
    * Style of banner's inner content.

src/components/Checkbox/Checkbox.tsx

@@ -17,11 +17,15 @@ import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
 import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
 import { tokens } from '../../theme/tokens';
-import type { $RemoveChildren, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../types';
 import { isKeyboardFocusEvent } from '../../utils/isKeyboardFocusEvent';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Status of checkbox.
    */

src/components/Chip/Chip.tsx

@@ -5,6 +5,7 @@ import type {
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
+  TextProps,
   TextStyle,
   ViewProps,
 } from 'react-native';
@@ -15,7 +16,7 @@ import { getChipColors } from './helpers';
 import type { ChipAvatarProps } from './helpers';
 import { useInternalTheme } from '../../core/theming';
 import { white } from '../../theme/colors';
-import type { EllipsizeProp, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../types';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
@@ -140,7 +141,7 @@ export type Props = Omit<ViewProps, 'style'> & {
   /**
    * Ellipsize Mode for the children text
    */
-  ellipsizeMode?: EllipsizeProp;
+  ellipsizeMode?: TextProps['ellipsizeMode'];
   /**
    * Specifies the largest possible scale a text font can reach.
    */

src/components/DataTable/DataTableCell.tsx

@@ -7,11 +7,14 @@ import type {
   GestureResponderEvent,
 } from 'react-native';
 
-import type { $RemoveChildren } from '../../types';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Content of the `DataTableCell`.
    */

src/components/DataTable/DataTableRow.tsx

@@ -8,10 +8,14 @@ import type {
 } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../types';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Content of the `DataTableRow`.
    */

src/components/Divider.tsx

@@ -1,10 +1,11 @@
+import type * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 import { useInternalTheme } from '../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../types';
+import type { ThemeProp } from '../types';
 
-export type Props = $RemoveChildren<typeof View> & {
+export type Props = Omit<React.PropsWithoutRef<ViewProps>, 'children'> & {
   /**
    * @renamed Renamed from 'inset' to 'leftInset` in v5.x
    * Whether divider has a left inset.

src/components/IconButton/IconButton.tsx

@@ -11,18 +11,22 @@ import Animated, { type AnimatedStyle } from 'react-native-reanimated';
 
 import { getIconButtonColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../types';
 import ActivityIndicator from '../ActivityIndicator';
 import CrossFadeIcon from '../CrossFadeIcon';
 import Icon from '../Icon';
 import type { IconSource } from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
 const PADDING = 8;
 
 type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
 
-export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children' | 'style'
+> & {
   /**
    * Icon to display.
    */

src/components/List/ListItem.tsx

@@ -6,22 +6,24 @@ import type {
   NativeSyntheticEvent,
   StyleProp,
   TextLayoutEventData,
+  TextProps,
   TextStyle,
   ViewStyle,
 } from 'react-native';
 
 import { getLeftStyles, getRightStyles } from './utils';
 import type { Style } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../types';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 type Title =
   | React.ReactNode
   | ((props: {
       selectable: boolean;
-      ellipsizeMode: EllipsizeProp | undefined;
+      ellipsizeMode: TextProps['ellipsizeMode'];
       color: ColorValue;
       fontSize: number;
     }) => React.ReactNode);
@@ -30,12 +32,15 @@ type Description =
   | React.ReactNode
   | ((props: {
       selectable: boolean;
-      ellipsizeMode: EllipsizeProp | undefined;
+      ellipsizeMode: TextProps['ellipsizeMode'];
       color: ColorValue;
       fontSize: number;
     }) => React.ReactNode);
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Title text for the list item.
    */
@@ -96,13 +101,13 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    *
    * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)
    */
-  titleEllipsizeMode?: EllipsizeProp;
+  titleEllipsizeMode?: TextProps['ellipsizeMode'];
   /**
    * Ellipsize Mode for the Description.  One of `'head'`, `'middle'`, `'tail'`, `'clip'`.
    *
    * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)
    */
-  descriptionEllipsizeMode?: EllipsizeProp;
+  descriptionEllipsizeMode?: TextProps['ellipsizeMode'];
   /**
    * Specifies the largest possible scale a title font can reach.
    */

src/components/List/utils.ts

@@ -1,13 +1,13 @@
 import { StyleSheet } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextProps, ViewStyle } from 'react-native';
 
-import type { EllipsizeProp, InternalTheme, ThemeProp } from '../../types';
+import type { InternalTheme, ThemeProp } from '../../types';
 
 type Description =
   | React.ReactNode
   | ((props: {
       selectable: boolean;
-      ellipsizeMode: EllipsizeProp | undefined;
+      ellipsizeMode: TextProps['ellipsizeMode'];
       color: string;
       fontSize: number;
     }) => React.ReactNode);

src/components/RadioButton/RadioButtonAndroid.tsx

@@ -6,10 +6,14 @@ import { RadioButtonContext } from './RadioButtonGroup';
 import type { RadioButtonContextType } from './RadioButtonGroup';
 import { getSelectionControlColor, handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../types';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Value of the radio button
    */

src/components/RadioButton/RadioButtonIOS.tsx

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import type { GestureResponderEvent } from 'react-native';
 
@@ -6,11 +7,15 @@ import type { RadioButtonContextType } from './RadioButtonGroup';
 import { handlePress, isChecked } from './utils';
 import { getSelectionControlIOSColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
+import type { ThemeProp } from '../../types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import type { Props as TouchableRippleProps } from '../TouchableRipple/TouchableRipple';
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = Omit<
+  React.PropsWithoutRef<TouchableRippleProps>,
+  'children'
+> & {
   /**
    * Value of the radio button
    */

src/components/Snackbar.tsx

@@ -15,6 +15,7 @@ import { scheduleOnRN } from 'react-native-worklets';
 import useLatestCallback from 'use-latest-callback';
 
 import Button from './Button/Button';
+import type { Props as ButtonProps } from './Button/Button';
 import type { IconSource } from './Icon';
 import IconButton from './IconButton/IconButton';
 import MaterialCommunityIcon from './MaterialCommunityIcon';
@@ -23,7 +24,7 @@ import type { SurfaceStyle } from './Surface';
 import Text from './Typography/Text';
 import { useLocale } from '../core/locale';
 import { useInternalTheme } from '../core/theming';
-import type { $RemoveChildren, Elevation, ThemeProp } from '../types';
+import type { Elevation, ThemeProp } from '../types';
 
 export type Props = Omit<ViewProps, 'style'> & {
   /**
@@ -35,7 +36,7 @@ export type Props = Omit<ViewProps, 'style'> & {
    * - `label` - Label of the action button
    * - `onPress` - Callback that is called when action button is pressed.
    */
-  action?: $RemoveChildren<typeof Button> & {
+  action?: Omit<React.PropsWithoutRef<ButtonProps>, 'children'> & {
     label: string;
   };
   /**

src/components/TextInput/TextInputIcon.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
 import { View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import { ACCESSORY_SIZE } from './constants';
 import { styles } from './styles';
 import { getIconColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $Omit } from '../../types';
 import IconButton from '../IconButton/IconButton';
+import type { Props as IconButtonProps } from '../IconButton/IconButton';
 
 export type TextInputAccessoryProps = {
   style: StyleProp<ViewStyle>;
@@ -17,7 +16,7 @@ export type TextInputAccessoryProps = {
 };
 
 export type TextInputIconProps = TextInputAccessoryProps &
-  $Omit<React.ComponentProps<typeof IconButton>, keyof TextInputAccessoryProps>;
+  Omit<IconButtonProps, keyof TextInputAccessoryProps>;
 
 /**
  * A component to render a leading / trailing icon in the TextInput

src/index.tsx

@@ -147,4 +147,4 @@ export type { Props as SegmentedButtonsProps } from './components/SegmentedButto
 export type { Props as ListImageProps } from './components/List/ListImage';
 export type { Props as TooltipProps } from './components/Tooltip/Tooltip';
 
-export { type TypescaleKey, type Theme, type Elevation } from './types';
+export { type TypescaleKey, type Theme, type Elevation } from './theme/types';