From 2c2dfba45357bbd205a59145ae55a2779c911ae0 Mon Sep 17 00:00:00 2001 From: Lucas Faria Mendes Date: Fri, 14 Aug 2026 15:06:35 -0300 Subject: remake Signed-off-by: Lucas Faria Mendes --- src/components/ui/input.tsx | 98 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 src/components/ui/input.tsx (limited to 'src/components/ui/input.tsx') 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(function Input( + { label, error, hint, prefix, style, ...rest }, + ref, +) { + const [focused, setFocused] = useState(false); + + return ( + + {label} + + {prefix ? {prefix} : null} + setFocused(true)} + onBlur={() => setFocused(false)} + selectionColor={Colors.primaryLight} + {...rest} + /> + + {error ? ( + {error} + ) : hint ? ( + {hint} + ) : null} + + ); +}); + +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, + }, +}); -- cgit v1.2.3