remake

Signed-off-by: Lucas Faria Mendes <lucas.fariamo08@gmail.com>

1 files changed, 98 insertions, 0 deletions

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..25728df
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,98 @@
+import React, { forwardRef, useState } from 'react';
+import {
+    StyleSheet,
+    Text,
+    TextInput,
+    type TextInputProps,
+    View,
+} from 'react-native';
+import { Colors, Radius, Spacing, Typography } from '@/constants/theme';
+
+interface InputProps extends TextInputProps {
+    label: string;
+    error?: string;
+    hint?: string;
+    prefix?: string;
+}
+
+export const Input = forwardRef<TextInput, InputProps>(function Input(
+    { label, error, hint, prefix, style, ...rest },
+    ref,
+) {
+    const [focused, setFocused] = useState(false);
+
+    return (
+        <View style={styles.wrapper}>
+            <Text style={styles.label}>{label}</Text>
+            <View
+                style={[
+                    styles.inputRow,
+                    focused && styles.inputRowFocused,
+                    !!error && styles.inputRowError,
+                ]}
+            >
+                {prefix ? <Text style={styles.prefix}>{prefix}</Text> : null}
+                <TextInput
+                    ref={ref}
+                    style={[styles.input, style]}
+                    placeholderTextColor={Colors.textMuted}
+                    onFocus={() => setFocused(true)}
+                    onBlur={() => setFocused(false)}
+                    selectionColor={Colors.primaryLight}
+                    {...rest}
+                />
+            </View>
+            {error ? (
+                <Text style={styles.error}>{error}</Text>
+            ) : hint ? (
+                <Text style={styles.hint}>{hint}</Text>
+            ) : null}
+        </View>
+    );
+});
+
+const styles = StyleSheet.create({
+    wrapper: {
+        gap: Spacing.xs,
+    },
+    label: {
+        ...Typography.caption,
+        color: Colors.textSecondary,
+        textTransform: 'uppercase',
+        letterSpacing: 1,
+    },
+    inputRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: Colors.surfaceElevated,
+        borderRadius: Radius.md,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        paddingHorizontal: Spacing.md,
+        height: 52,
+    },
+    inputRowFocused: {
+        borderColor: Colors.primaryLight,
+    },
+    inputRowError: {
+        borderColor: Colors.negative,
+    },
+    prefix: {
+        ...Typography.bodyLarge,
+        color: Colors.textSecondary,
+        marginRight: Spacing.sm,
+    },
+    input: {
+        flex: 1,
+        ...Typography.bodyLarge,
+        color: Colors.textPrimary,
+    },
+    error: {
+        ...Typography.caption,
+        color: Colors.negative,
+    },
+    hint: {
+        ...Typography.caption,
+        color: Colors.textMuted,
+    },
+});