soconnor
32ffe782ea
Flatten widget layouts and use system colors so banner and expanded regions render on vibrant lock screens; migrate auth sessions per account to prevent double sign-in; scope app lock PIN to accounts; default clock description to "Clock In"; add architecture docs and deferred form validation on auth screens. Co-authored-by: Cursor <cursoragent@cursor.com>
67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import {
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
type TextInputProps,
|
|
} from "react-native";
|
|
|
|
import { useAppTheme } from "@/contexts/ThemeContext";
|
|
import { fonts, radii, spacing } from "@/constants/theme";
|
|
|
|
type InputProps = TextInputProps & {
|
|
label: string;
|
|
error?: string;
|
|
required?: boolean;
|
|
};
|
|
|
|
export function Input({ label, error, required, style, ...props }: InputProps) {
|
|
const { colors } = useAppTheme();
|
|
|
|
return (
|
|
<View style={styles.wrapper}>
|
|
<Text style={[styles.label, { color: colors.foreground }]}>
|
|
{label}
|
|
{required ? <Text style={{ color: colors.destructive }}> *</Text> : null}
|
|
</Text>
|
|
<TextInput
|
|
placeholderTextColor={colors.mutedForeground}
|
|
style={[
|
|
styles.input,
|
|
{
|
|
borderColor: colors.border,
|
|
color: colors.foreground,
|
|
backgroundColor: colors.cardGlass,
|
|
},
|
|
error && { borderColor: colors.destructive },
|
|
style,
|
|
]}
|
|
{...props}
|
|
/>
|
|
{error ? <Text style={[styles.error, { color: colors.destructive }]}>{error}</Text> : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrapper: {
|
|
gap: spacing.sm,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontFamily: fonts.bodyMedium,
|
|
},
|
|
input: {
|
|
minHeight: 40,
|
|
borderWidth: 1,
|
|
borderRadius: radii.md,
|
|
paddingHorizontal: spacing.md,
|
|
fontSize: 14,
|
|
fontFamily: fonts.body,
|
|
},
|
|
error: {
|
|
fontSize: 13,
|
|
fontFamily: fonts.body,
|
|
},
|
|
});
|