gistfile1.txt

import clsx from 'rn-clsx';

export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xlg: 32,
};

export const theme = {
  spacing,
};


// components/Input/index.tsx
export const Input = () => {
  const inputStyles = clsx(
    {
      root: true,
      focused: props.focused,
      disabled: props.disabled,
    },
    styles.container
  );
  
  return <TextInput {...props} style={inputStyles} />
}

const styles = StyleSheet.create({
  container: {
    root: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: theme.colors.neutral00,
      paddingHorizontal: theme.spacing.sm,
      color: theme.colors.neutral900,
      borderBottomColor: theme.colors.neutral700,
      borderBottomWidth: 2,
    },
    focused: {
      borderBottomColor: theme.colors.primary,
    },
    disabled: {
      backgroundColor: theme.colors.neutral300,
      opacity: 0.5,
    },
  },
});