diff --git a/packages/react-native-ficus-ui/src/components/input/input.service.ts b/packages/react-native-ficus-ui/src/components/input/input.service.ts index 5ca0edb..5d342e7 100644 --- a/packages/react-native-ficus-ui/src/components/input/input.service.ts +++ b/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( () => ({ diff --git a/packages/react-native-ficus-ui/src/style-system/pseudos.ts b/packages/react-native-ficus-ui/src/style-system/pseudos.ts index f28cfdf..655015e 100644 --- a/packages/react-native-ficus-ui/src/style-system/pseudos.ts +++ b/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 = Partial>; diff --git a/packages/react-native-ficus-ui/src/style-system/system.types.ts b/packages/react-native-ficus-ui/src/style-system/system.types.ts index 7922f85..59ad106 100644 --- a/packages/react-native-ficus-ui/src/style-system/system.types.ts +++ b/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 { export type RecursiveStyleSheetObject = D & (D | RecursivePseudo | RecursiveStyleSheetSelector); -export type SystemStyleObject = - RecursiveStyleSheetObject; +export type SystemStyleObject = RecursiveStyleSheetObject< + StyleSheetWithMultiValues & StateStyles +>; type PseudoProps = { // eslint-disable-next-line no-unused-vars