feat: add caretColor prop to TextInputOTP component

- remove animated-caret.tsx and replace with simpler caret component
- extract color constants to constants.ts
- use constants for slot dimensions and colors
- update imports and component usage accordingly

Author: johelder

src/components/animated-caret.tsx renamed to src/components/caret.tsx

@@ -1,8 +1,11 @@
 import { useEffect } from 'react';
 import { StyleSheet, Animated, useAnimatedValue } from 'react-native';
+import { DEFAULT_DARK_COLOR } from '../constants';
+import { useTextInputOTP } from '../hooks/use-text-input-otp';
 
-export function AnimatedCaret() {
+export function Caret() {
   const opacity = useAnimatedValue(0);
+  const { caretColor } = useTextInputOTP();
 
   useEffect(() => {
     Animated.loop(
@@ -21,14 +24,20 @@ export function AnimatedCaret() {
     ).start();
   }, [opacity]);
 
-  return <Animated.View style={[styles.caret, { opacity }]} />;
+  return (
+    <Animated.View
+      style={[
+        styles.caret,
+        { opacity, backgroundColor: caretColor ?? DEFAULT_DARK_COLOR },
+      ]}
+    />
+  );
 }
 
 const styles = StyleSheet.create({
   caret: {
     width: 2,
     height: 16,
     borderRadius: 16,
-    backgroundColor: '#030712',
   },
 });

src/components/text-input-otp-separator.tsx

@@ -1,4 +1,5 @@
 import { View, StyleSheet } from 'react-native';
+import { DEFAULT_DARK_COLOR } from '../constants';
 import type { TextInputOTPSeparatorProps } from '../types';
 
 export function TextInputOTPSeparator({
@@ -13,7 +14,7 @@ const styles = StyleSheet.create({
   separator: {
     width: 10,
     height: 4,
-    backgroundColor: '#030712',
+    backgroundColor: DEFAULT_DARK_COLOR,
     borderRadius: 15,
   },
 });

src/components/text-input-otp-slot.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Pressable, Text, StyleSheet } from 'react-native';
-import { AnimatedCaret } from './animated-caret';
+import { Caret } from './caret';
 import { useTextInputOTP } from '../hooks/use-text-input-otp';
 import { useSlotBorderStyles } from '../hooks/use-slot-border-styles';
 import { SLOT_HEIGHT, SLOT_WIDTH } from '../constants';
@@ -45,7 +45,7 @@ function TextInputOTPSlotComponent({
         </Text>
       )}
 
-      {shouldRenderCaret && <AnimatedCaret />}
+      {shouldRenderCaret && <Caret />}
     </Pressable>
   );
 }

src/constants.ts

@@ -1,3 +1,5 @@
-export const BACKSPACE_KEY = 'Backspace';
 export const SLOT_WIDTH = 50;
 export const SLOT_HEIGHT = 50;
+export const FOCUSED_SLOT_HEIGHT = 54;
+export const DEFAULT_DARK_COLOR = '#030712';
+export const DEFAULT_LIGHT_COLOR = '#E4E7EC';

src/hooks/use-slot-border-styles.ts

@@ -1,3 +1,9 @@
+import {
+  DEFAULT_DARK_COLOR,
+  DEFAULT_LIGHT_COLOR,
+  FOCUSED_SLOT_HEIGHT,
+  SLOT_HEIGHT,
+} from '../constants';
 import type { UseSlotBorderStylesProps } from '../types';
 
 export function useSlotBorderStyles({
@@ -6,8 +12,8 @@ export function useSlotBorderStyles({
   isLast,
 }: UseSlotBorderStylesProps) {
   return {
-    height: isFocused ? 54 : 50,
-    borderColor: isFocused ? '#030712' : '#E4E7EC',
+    height: isFocused ? FOCUSED_SLOT_HEIGHT : SLOT_HEIGHT,
+    borderColor: isFocused ? DEFAULT_DARK_COLOR : DEFAULT_LIGHT_COLOR,
     borderTopWidth: 2,
     borderBottomWidth: 2,
     borderLeftWidth: isFocused || isFirst ? 2 : 1,

src/hooks/use-text-input-otp.tsx

@@ -32,6 +32,7 @@ export function TextInputOTPProvider({
   onFilled,
   onChangeText,
   caretHidden = false,
+  caretColor,
   children,
 }: TextInputOTPProviderProps) {
   const [code, setCode] = useState(value);
@@ -98,6 +99,7 @@ export function TextInputOTPProvider({
       blur,
       clear,
       caretHidden,
+      caretColor,
     }),
     [
       clear,
@@ -108,6 +110,7 @@ export function TextInputOTPProvider({
       setValue,
       value,
       caretHidden,
+      caretColor,
     ]
   );
 

src/types.ts

@@ -20,6 +20,7 @@ export type TextInputOTPContextProps = {
   blur: () => void;
   clear: () => void;
   caretHidden: boolean;
+  caretColor?: string;
 };
 
 export type TextInputOTPProviderProps = PropsWithChildren<
@@ -31,6 +32,7 @@ export type TextInputOTPProviderProps = PropsWithChildren<
     | 'onFilled'
     | 'value'
     | 'caretHidden'
+    | 'caretColor'
   >
 >;
 
@@ -74,4 +76,5 @@ export type TextInputOTPProps = {
   maxLength: number;
   onFilled?: (text: string) => void;
   containerStyles?: StyleProp<ViewStyle>;
+  caretColor?: string;
 } & Omit<TextInputProps, 'style'>;