fix: type annotation

src/ui/animations/Bounceable.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo, ReactNode } from 'react';
+import React, { ForwardedRef, forwardRef, ReactNode, Ref } from 'react';
 import type {
   PressableStateCallbackType,
   View as NativeView,
@@ -106,6 +106,8 @@ const BounceableComponent = (
   );
 };
 
-export const Bounceable = memo(
-  forwardRef<NativeView, BounceableProps>(BounceableComponent)
+export const Bounceable: (
+  props: { ref?: Ref<NativeView> } & BounceableProps
+) => JSX.Element | null = forwardRef<NativeView, BounceableProps>(
+  BounceableComponent
 );

src/ui/elements/Button.tsx

@@ -1,9 +1,9 @@
 import React, {
   ForwardedRef,
   forwardRef,
-  memo,
   ReactElement,
   ReactNode,
+  Ref,
 } from 'react';
 import type { View as NativeView } from 'react-native';
 import type {
@@ -163,6 +163,6 @@ const lgStyle = createAreniteStyle({
   },
 });
 
-export const Button = memo(
-  forwardRef<NativeView, ButtonProps>(ButtonComponent)
-);
+export const Button: (
+  props: { ref?: Ref<NativeView> } & ButtonProps
+) => JSX.Element | null = forwardRef<NativeView, ButtonProps>(ButtonComponent);

src/ui/elements/ButtonGroup.tsx

@@ -121,4 +121,6 @@ const lgRadiusStyle = {
 
 ButtonGroupComponent.displayName = 'arenite-kit.ui.ButtonGroup';
 
-export const ButtonGroup = ButtonGroupComponent;
+export const ButtonGroup: <T>(
+  props: ButtonGroupProps<T>
+) => JSX.Element | null = ButtonGroupComponent;

src/ui/elements/Divider.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React from 'react';
 import type { BorderThemeProps, ColorThemeProps } from '../../core';
 import { createAreniteStyle } from '../../style';
 import { Text, Box } from '../primitives';
@@ -65,4 +65,4 @@ const defaultStyle = createAreniteStyle({
   },
 });
 
-export const Divider = memo(DividerComponent);
+export const Divider = DividerComponent;

src/ui/elements/HStack.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo } from 'react';
+import React, { ForwardedRef, forwardRef, Ref } from 'react';
 import type { View as NativeView } from 'react-native';
 import { createAreniteStyle } from '../../style';
 import type { AreniteViewStyle } from '../../style';
@@ -37,6 +37,6 @@ const defaultStyle = createAreniteStyle({
   },
 });
 
-export const HStack = memo(
-  forwardRef<NativeView, HStackProps>(HStackComponent)
-);
+export const HStack: (
+  props: { ref?: Ref<NativeView> } & HStackProps
+) => JSX.Element | null = forwardRef<NativeView, HStackProps>(HStackComponent);

src/ui/elements/IconButton.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo, ReactNode } from 'react';
+import React, { ForwardedRef, forwardRef, ReactNode, Ref } from 'react';
 import type { View as NativeView } from 'react-native';
 import type { BgThemeProps, BorderThemeProps, SizeKeys } from '../../core';
 import { createAreniteStyle } from '../../style';
@@ -83,6 +83,8 @@ const defaultStyle = createAreniteStyle({
   },
 });
 
-export const IconButton = memo(
-  forwardRef<NativeView, IconButtonProps>(IconButtonComponent)
+export const IconButton: (
+  props: { ref?: Ref<NativeView> } & IconButtonProps
+) => JSX.Element | null = forwardRef<NativeView, IconButtonProps>(
+  IconButtonComponent
 );

src/ui/elements/VStack.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo } from 'react';
+import React, { ForwardedRef, forwardRef, Ref } from 'react';
 import type { View as NativeView } from 'react-native';
 import { createAreniteStyle } from '../../style';
 import type { AreniteViewStyle } from '../../style';
@@ -37,6 +37,6 @@ const defaultStyle = createAreniteStyle({
   },
 });
 
-export const VStack = memo(
-  forwardRef<NativeView, VStackProps>(VStackComponent)
-);
+export const VStack: (
+  props: { ref?: Ref<NativeView> } & VStackProps
+) => JSX.Element | null = forwardRef<NativeView, VStackProps>(VStackComponent);

src/ui/primitives/ActivityIndicator.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo } from 'react';
+import React, { ForwardedRef, forwardRef, memo, Ref } from 'react';
 import { ActivityIndicator as NativeActivityIndicator } from 'react-native';
 import type { CommonToken } from '../../core';
 import { BgThemeProps, BorderThemeProps, usePaletteColor } from '../../core';
@@ -50,7 +50,9 @@ const ActivityIndicatorComponent = (
   );
 };
 
-export const ActivityIndicator = memo(
+export const ActivityIndicator: (
+  props: { ref?: Ref<NativeActivityIndicator> } & ActivityIndicatorProps
+) => JSX.Element | null = memo(
   forwardRef<NativeActivityIndicator, ActivityIndicatorProps>(
     ActivityIndicatorComponent
   )

src/ui/primitives/Box.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo } from 'react';
+import React, { ForwardedRef, forwardRef, Ref } from 'react';
 import { View as NativeView } from 'react-native';
 import type { BgThemeProps, BorderThemeProps } from '../../core';
 import { usePaletteColor } from '../../core';
@@ -43,4 +43,6 @@ const BoxComponent = (props: BoxProps, ref: ForwardedRef<NativeView>) => {
   );
 };
 
-export const Box = memo(forwardRef<NativeView, BoxProps>(BoxComponent));
+export const Box: (
+  props: { ref?: Ref<NativeView> } & BoxProps
+) => JSX.Element | null = forwardRef<NativeView, BoxProps>(BoxComponent);

src/ui/primitives/Image.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo } from 'react';
+import React, { ForwardedRef, forwardRef, Ref } from 'react';
 import { Image as NativeImage } from 'react-native';
 import { usePaletteColor } from '../../core';
 import type { BgThemeProps, BorderThemeProps } from '../../core';
@@ -47,4 +47,6 @@ const ImageComponent = (props: ImageProps, ref: ForwardedRef<NativeImage>) => {
   );
 };
 
-export const Image = memo(forwardRef<NativeImage, ImageProps>(ImageComponent));
+export const Image: (
+  props: { ref?: Ref<NativeImage> } & ImageProps
+) => JSX.Element | null = forwardRef<NativeImage, ImageProps>(ImageComponent);

src/ui/primitives/Pressable.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo } from 'react';
+import React, { ForwardedRef, forwardRef, Ref } from 'react';
 import {
   View as NativeView,
   Pressable as NativePressable,
@@ -59,6 +59,8 @@ const PressableComponent = (
   );
 };
 
-export const Pressable = memo(
-  forwardRef<NativeView, PressableProps>(PressableComponent)
+export const Pressable: (
+  props: { ref?: Ref<NativeView> } & PressableProps
+) => JSX.Element | null = forwardRef<NativeView, PressableProps>(
+  PressableComponent
 );

src/ui/primitives/SafeAreaView.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React from 'react';
 import type { NativeSafeAreaViewProps } from 'react-native-safe-area-context';
 import { SafeAreaView as NativeSafeAreaView } from 'react-native-safe-area-context';
 import type { BgThemeProps } from '../../core';
@@ -42,4 +42,5 @@ const defaultStyle = createAreniteStyle({
   },
 });
 
-export const SafeAreaView = memo(SafeAreaViewComponent);
+export const SafeAreaView: (props: SafeAreaViewProps) => JSX.Element | null =
+  SafeAreaViewComponent;

src/ui/primitives/ScrollView.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo } from 'react';
+import React, { ForwardedRef, forwardRef, Ref } from 'react';
 import { ScrollView as NativeScrollView } from 'react-native';
 import type { BgThemeProps, BorderThemeProps } from '../../core';
 import { usePaletteColor } from '../../core';
@@ -46,6 +46,8 @@ const ScrollViewComponent = (
   );
 };
 
-export const ScrollView = memo(
-  forwardRef<NativeScrollView, ScrollViewProps>(ScrollViewComponent)
+export const ScrollView: (
+  props: { ref?: Ref<NativeScrollView> } & ScrollViewProps
+) => JSX.Element | null = forwardRef<NativeScrollView, ScrollViewProps>(
+  ScrollViewComponent
 );

src/ui/primitives/Text.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo } from 'react';
+import React, { ForwardedRef, forwardRef, Ref } from 'react';
 import { Text as NativeText } from 'react-native';
 import type { ColorThemeProps } from '../../core';
 import { usePaletteColor } from '../../core';
@@ -28,4 +28,6 @@ const TextComponent = (props: TextProps, ref: ForwardedRef<NativeText>) => {
   return <NativeText ref={ref} style={[style, { color }]} {...otherProps} />;
 };
 
-export const Text = memo(forwardRef<NativeText, TextProps>(TextComponent));
+export const Text: (
+  props: { ref?: Ref<NativeText> } & TextProps
+) => JSX.Element | null = forwardRef<NativeText, TextProps>(TextComponent);

src/ui/primitives/TextInput.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, memo } from 'react';
+import React, { ForwardedRef, forwardRef, Ref } from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import type {
   BgThemeProps,
@@ -81,6 +81,8 @@ const defaultStyle = createAreniteStyle({
   },
 });
 
-export const TextInput = memo(
-  forwardRef<NativeTextInput, TextInputProps>(TextInputComponent)
+export const TextInput: (
+  props: { ref?: Ref<NativeTextInput> } & TextInputProps
+) => JSX.Element | null = forwardRef<NativeTextInput, TextInputProps>(
+  TextInputComponent
 );