feat: imported composite component from the public app (button, input and modal)

src/components/ButtonNew.tsx

+import { asp as g } from "@asp/asp";
+import type { FC } from "react";
+import {
+	ActivityIndicator,
+	Text,
+	type TextProps,
+	TouchableOpacity,
+	type TouchableOpacityProps,
+} from "react-native";
+
+const DEFAULT_HEIGHT = 50;
+
+type ContainerProps = TouchableOpacityProps & {
+	isLoading?: boolean;
+};
+
+export const Container: FC<ContainerProps> = ({ children, style, isLoading, onPress, ...rest }) => {
+	return (
+		<TouchableOpacity
+			onPress={onPress}
+			style={[
+				g.p_md,
+				g.rounded_xs,
+				g.align_center,
+				g.justify_center,
+				{ height: DEFAULT_HEIGHT, backgroundColor: "#03875b" },
+				style,
+			]}
+			{...rest}
+		>
+			{isLoading ? <ActivityIndicator /> : children}
+		</TouchableOpacity>
+	);
+};
+
+export const Label: FC<TextProps> = ({ children, style, ...rest }) => {
+	return (
+		<Text style={[g.font_bold, { color: "white" }, style]} {...rest}>
+			{children}
+		</Text>
+	);
+};

src/components/InputNew.tsx

+import { asp as g } from "@asp/asp";
+import type { FC } from "react";
+import {
+	Text,
+	TextInput,
+	type TextInputProps,
+	type TextProps,
+	View,
+	type ViewProps,
+} from "react-native";
+
+const DEFAULT_HEIGHT = 50;
+
+export const Container: FC<ViewProps> = ({ children, style, ...rest }) => {
+	return (
+		<View style={[g.gap_md, style]} {...rest}>
+			{children}
+		</View>
+	);
+};
+
+export const Header: FC<TextProps> = ({ children, style, ...rest }) => {
+	return (
+		<Text style={[g.font_bold, style]} {...rest}>
+			{children}
+		</Text>
+	);
+};
+
+export const FieldContainer: FC<ViewProps> = ({ children, style, ...rest }) => {
+	return (
+		<View
+			style={[
+				g.p_md,
+				g.gap_xs,
+				g.rounded_xs,
+				g.flex_row,
+				{ backgroundColor: "#e8e8e9ff", height: DEFAULT_HEIGHT },
+				style,
+			]}
+			{...rest}
+		>
+			{children}
+		</View>
+	);
+};
+
+export const Field: FC<TextInputProps & { ref?: React.Ref<TextInput> }> = ({
+	style,
+	ref,
+	...props
+}) => {
+	return (
+		<TextInput
+			ref={ref}
+			placeholderTextColor={"black"}
+			style={[
+				g.flex_1,
+				g.rounded_xs,
+				g.p_0,
+				{
+					color: "black",
+				},
+
+				style,
+			]}
+			{...props}
+		/>
+	);
+};

src/components/Modal.tsx

+import { asp as g } from "@asp/asp";
+import type { FC } from "react";
+import { Modal, type ModalProps, View, type ViewProps, type ViewStyle } from "react-native";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+
+/**
+ * A view container that wraps a {@link SafeAreaView} and a {@link SafeAreaProvider}.
+ * This is useful for modal components that should be centered and have a safe area.
+ *
+ * @param {ViewProps} props The props to pass to the {@link View} component.
+ * @returns {React.ReactElement} The container component.
+ */
+export const SafeView: FC<ViewProps> = ({ children, style, ...rest }) => {
+	return (
+		<SafeAreaProvider>
+			<SafeAreaView style={[g.flex_1, g.justify_center, g.align_center, style]} {...rest}>
+				{children}
+			</SafeAreaView>
+		</SafeAreaProvider>
+	);
+};
+
+/**
+ * RnModal is a styled Modal component that provides a basic styling for the
+ * inner content of a modal. It centers the content horizontally and vertically
+ * and provides a light green background color with rounded corners.
+ *
+ * @param {JSX.Element | JSX.Element[]} children The content to be rendered
+ * inside the modal.
+ * @param {ViewStyle} style Optional style overrides for the modal's outer View.
+ * @param {ModalProps} rest Optional props.
+ *
+ * @returns A styled Modal component with the inner content.
+ */
+export const RnModal: FC<ModalProps & { style?: ViewStyle }> = ({ children, style, ...rest }) => {
+	return (
+		<Modal animationType="slide" transparent={true} visible={true} {...rest}>
+			<View style={[g.flex_1, g.justify_center, g.align_center, style]}>{children}</View>
+		</Modal>
+	);
+};
+
+/**
+ * OuterView is a styled View component that provides a basic styling for the
+ * inner content of a modal. It centers the content horizontally and vertically
+ * and provides a light green background color with rounded corners.
+ *
+ * @param {JSX.Element | JSX.Element[]} children The content to be rendered
+ * inside the modal.
+ * @param {ViewProps} style Optional style overrides.
+ * @param {ViewProps} rest Optional props.
+ *
+ * @returns A styled View component with the inner content.
+ */
+export const OuterView: FC<ViewProps> = ({ children, style, ...rest }) => {
+	return (
+		<View
+			style={[g.rounded_xs, { width: 200, height: 200, backgroundColor: "#cfe3d0ff" }, style]}
+			{...rest}
+		>
+			<View style={[g.flex_1]}>{children}</View>
+		</View>
+	);
+};