feat: input uses accepts focused props from theme and type

Author: heloise-gllm

packages/react-native-ficus-ui/src/components/input/index.tsx

@@ -15,6 +15,7 @@ import {
   isStyleProp,
   omitThemingProps,
 } from '../../style-system';
+import { SystemStyleObject } from '../../style-system';
 import { getColor, useTheme } from '../../theme';
 import { ButtonSpinner } from '../button/button-spinner';
 import {
@@ -30,7 +31,13 @@ export interface InputProps
   extends NativeFicusProps<'TextInput'>,
     PrefixSuffixProps,
     InputOptions,
-    ThemingProps<'Input'> {}
+    ThemingProps<'Input'> {
+  _focused?: SystemStyleObject;
+  _disabled?: SystemStyleObject;
+  _checked?: SystemStyleObject;
+  _dark?: SystemStyleObject;
+  __styles?: SystemStyleObject;
+}
 
 export const Input = forwardRef<InputProps, 'TextInput'>((props, ref) => {
   const [isFocused, setIsFocused] = useState(false);

packages/react-native-ficus-ui/src/components/input/input.service.ts

@@ -36,15 +36,27 @@ export function useInput(
     [isDisabled, isLoading, isFocused, styles, colorMode]
   );
 
-  const inputContainerStyles = useMemo(
-    () => ({
+  const themeFocused = styles?._focused;
+  const propFocused = props._focused;
+
+  const inputContainerStyles = useMemo(() => {
+    let base = {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
       ...stateStyles,
-    }),
-    [stateStyles]
-  );
+    };
+
+    if (isFocused) {
+      base = {
+        ...base,
+        ...(themeFocused || {}),
+        ...(propFocused || {}),
+      };
+    }
+
+    return base;
+  }, [stateStyles, isFocused, themeFocused, propFocused]);
 
   const inputStyles = useMemo(
     () => ({

packages/react-native-ficus-ui/src/style-system/system.types.ts

@@ -63,8 +63,14 @@ export interface RecursiveStyleSheetSelector<D> {
 export type RecursiveStyleSheetObject<D> = D &
   (D | RecursivePseudo<D> | RecursiveStyleSheetSelector<D>);
 
-export type SystemStyleObject =
-  RecursiveStyleSheetObject<StyleSheetWithMultiValues>;
+export type SystemStyleObject = RecursiveStyleSheetObject<
+  StyleSheetWithMultiValues & {
+    _focused?: SystemStyleObject;
+    _disabled?: SystemStyleObject;
+    _checked?: SystemStyleObject;
+    _dark?: SystemStyleObject;
+  }
+>;
 
 type PseudoProps = {
   // eslint-disable-next-line no-unused-vars