feat: input uses accepts focused props from theme and type

Author: heloise-gllm

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/pseudos.ts

@@ -14,3 +14,5 @@ export const pseudoStylesMap = {
  * Represents the valid pseudo-class keys derived from `pseudoStylesMap`.
  */
 export type PseudoStyleKey = keyof typeof pseudoStylesMap;
+
+export type StateStyles<T = any> = Partial<Record<PseudoStyleKey, T>>;

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

@@ -11,7 +11,7 @@ import {
   SpaceProps,
 } from './config';
 import { CommonProps } from './config/common';
-import { PseudoStyleKey } from './pseudos';
+import { PseudoStyleKey, StateStyles } from './pseudos';
 import { RNStyleSheet, RNStyleSheetProperties } from './utils/prop-config';
 import { Dict, ResponsiveValue } from './utils/types';
 
@@ -63,8 +63,9 @@ export interface RecursiveStyleSheetSelector<D> {
 export type RecursiveStyleSheetObject<D> = D &
   (D | RecursivePseudo<D> | RecursiveStyleSheetSelector<D>);
 
-export type SystemStyleObject =
-  RecursiveStyleSheetObject<StyleSheetWithMultiValues>;
+export type SystemStyleObject = RecursiveStyleSheetObject<
+  StyleSheetWithMultiValues & StateStyles<any>
+>;
 
 type PseudoProps = {
   // eslint-disable-next-line no-unused-vars